https://github.com/ainurb/react-native-segment-control

Swipeable SegmentedControl component for React Native apps
https://github.com/ainurb/react-native-segment-control

animated animated-tabs control react-native segment segmentedcontrol swipe swipeable tabs

Last synced: 24 days ago
JSON representation

Swipeable SegmentedControl component for React Native apps

• Host: GitHub
• URL: https://github.com/ainurb/react-native-segment-control
• Owner: ainurb
• License: mit
• Created: 2018-05-01T14:32:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-16T11:32:49.000Z (almost 6 years ago)
• Last Synced: 2024-08-03T13:07:47.931Z (about 1 month ago)
• Topics: animated, animated-tabs, control, react-native, segment, segmentedcontrol, swipe, swipeable, tabs
• Language: JavaScript
• Homepage:
• Size: 914 KB
• Stars: 23
• Watchers: 0
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-segment-control ★7 - A swipeable SegmentedControl component for React Native apps. (Components / UI)
• awesome-react-native - react-native-segment-control ★7 - A swipeable SegmentedControl component for React Native apps. (Components / UI)
• awesome-react-native - react-native-segment-control ★7 - A swipeable SegmentedControl component for React Native apps. (Components / UI)
• awesome-react-native - react-native-segment-control ★7 - A swipeable SegmentedControl component for React Native apps. (Components / UI)

README

        
# react-native-segment-control

[![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)

[![npm version](http://img.shields.io/npm/v/react-native-segment-control.svg)](https://www.npmjs.com/package/react-native-segment-control)

[![npm downloads](https://img.shields.io/npm/dm/react-native-segment-control.svg?update=7)](http://badge.fury.io/js/react-native-segment-control)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.github.com/testshallpass/react-native-segment-control/master/LICENSE)

## Demo

 

## Installation

```

$ npm install react-native-segment-control --save

```

## Example

```JSX

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import SegmentControl from 'react-native-segment-control';

const One = () => {

  return This is first view;

};

const Two = () => {

  return This is second view;

};

const segments = [

  {

    title: 'One',

    view: One

  },

  {

    title: 'Two',

    view: Two

  }

];

const App = () => {

  return (

    

      

    

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#F5F7FA',

    justifyContent: 'center'

  },

  text: {

    alignSelf: 'center',

    margin: 50

  }

});

export default App;

```

## TO-DO's:

- [ ] Add background color property

- [ ] Add icons as tab titles