All Projects → ainurb → react-native-segment-control

ainurb / react-native-segment-control

Licence: MIT license
Swipeable SegmentedControl component for React Native apps

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to react-native-segment-control

React Native Scrollable Tab View
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
Stars: ✭ 6,784 (+32204.76%)
Mutual labels:  tabs, swipe, animated
Sjfluidsegmentedcontrol
A segmented control with custom appearance and interactive animations. Written in Swift 3.0.
Stars: ✭ 862 (+4004.76%)
Mutual labels:  segment, control, animated
React Native Tab View
A cross-platform Tab View component for React Native
Stars: ✭ 4,742 (+22480.95%)
Mutual labels:  tabs, swipe
Swipeable-View
Simple editActionsForRowAt functionality, written on SWIFTUI
Stars: ✭ 37 (+76.19%)
Mutual labels:  swipe, swipeable
react-native-viewpager-carousel
a flexible viewpager library with carousel functionality
Stars: ✭ 39 (+85.71%)
Mutual labels:  tabs, swipe
Jxcategoryview
A powerful and easy to use category view (segmentedcontrol, segmentview, pagingview, pagerview, pagecontrol) (腾讯新闻、今日头条、QQ音乐、网易云音乐、京东、爱奇艺、腾讯视频、淘宝、天猫、简书、微博等所有主流APP分类切换滚动视图)
Stars: ✭ 5,561 (+26380.95%)
Mutual labels:  segment, segmentedcontrol
React Swipeable Views
A React component for swipeable views. ❄️
Stars: ✭ 4,095 (+19400%)
Mutual labels:  swipe, swipeable
React Native Head Tab View
Add collapsible headers to your tab-view components.
Stars: ✭ 171 (+714.29%)
Mutual labels:  tabs, swipe
iron-swipeable-pages
[Polymer 1.x] Element that enables switching between different pages by swiping gesture.
Stars: ✭ 51 (+142.86%)
Mutual labels:  swipe, swipeable
Jxsegmentedview
A powerful and easy to use segmented view (segmentedcontrol, pagingview, pagerview, pagecontrol, categoryview) (腾讯新闻、今日头条、QQ音乐、网易云音乐、京东、爱奇艺、腾讯视频、淘宝、天猫、简书、微博等所有主流APP分类切换滚动视图)
Stars: ✭ 1,905 (+8971.43%)
Mutual labels:  segment, segmentedcontrol
gephi twitter media downloader
A small script designed to take either a .csv of Tweet ids, or the export from Gephi's TwitterStreamingImporter Plugin and download related Tweet media.
Stars: ✭ 41 (+95.24%)
Mutual labels:  animated
AXIOM-Remote
A device to control AXIOM cameras.
Stars: ✭ 24 (+14.29%)
Mutual labels:  control
TubeLister
A handy Chrome extension to collect all your YouTube tabs into one!
Stars: ✭ 19 (-9.52%)
Mutual labels:  tabs
DialogHost.Avalonia
AvaloniaUI control that provides a simple way to display a dialog with information or prompt the user when information is needed
Stars: ✭ 92 (+338.1%)
Mutual labels:  control
rts2
Contains core part of the RTS2 - RTS2 libraries, and drivers for basic devices.
Stars: ✭ 35 (+66.67%)
Mutual labels:  control
wui
Collection of GUI widgets for the web
Stars: ✭ 44 (+109.52%)
Mutual labels:  tabs
Reactor-and-Turbine-control-program
This is my Reactor- and Turbine control program for ComputerCraft and BigReactors
Stars: ✭ 18 (-14.29%)
Mutual labels:  control
snoozz-tab-snoozing
A Web Extension to declutter windows by snoozing tabs for later
Stars: ✭ 105 (+400%)
Mutual labels:  tabs
DismissibleExpandedList
A Flutter package to display hierarchical data in the form of list as well as allows to swipe the individual tiles.
Stars: ✭ 29 (+38.1%)
Mutual labels:  swipeable
memorize
Code and real data for "Enhancing Human Learning via Spaced Repetition Optimization", PNAS 2019
Stars: ✭ 155 (+638.1%)
Mutual labels:  control

react-native-segment-control

Platform npm version npm downloads License

Demo

Installation

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

Example

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SegmentControl from 'react-native-segment-control';

const One = () => {
  return <Text style={styles.text}>This is first view</Text>;
};
const Two = () => {
  return <Text style={styles.text}>This is second view</Text>;
};
const segments = [
  {
    title: 'One',
    view: One
  },
  {
    title: 'Two',
    view: Two
  }
];
const App = () => {
  return (
    <View style={styles.container}>
      <SegmentControl segments={segments} />
    </View>
  );
};

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].