How to use react-native-ios-kit - 10 common examples

No min. and max. values.
            Step === 2.
          
          {this.state.value3}
           this.setState({ value3 })}
            stepValue={2}
          />
        
      
    );
  }
}

export default withTheme(withSafeArea(StepperExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  row: {
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomColor: '#666',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

};
  render() {
    return (
      
    );
  }
}

export default withTheme(withSafeArea(SearchBarExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});

selectedValue: value,
              selectedIndex: index,
            })
          }
          style={{ width: 222, alignSelf: 'center' }}
        />
        
      
    );
  }
}

export default withTheme(withSafeArea(SegmentedExample));

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
  },
  content: {
    padding: 10,
  },
});

onValueChange={value => this.setState({ value4: value })}
          minIconName="ios-sunny"
          maxIconName="ios-sunny"
          minTrackTintColor={this.props.theme.positiveColor}
          maxTrackTintColor={this.props.theme.primaryColor}
          minIconColor={this.props.theme.positiveColor}
          maxIconColor={this.props.theme.primaryColor}
          minimumValue={10}
          maximumValue={40}
        />
      
    );
  }
}

export default withTheme(withSafeArea(SliderExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});

},
            {
              icon: 'ios-people',
              title: 'Disabled',
              onPress: this.selectTab,
              isActive: this.state.activeTab === 3,
              disabled: true,
            },
          ]}
        />
      
    );
  }
}

export default withTheme(withSafeArea(TabBarExample));

const styles = StyleSheet.create({
  screen: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

icon: 'ios-refresh',
              onPress: this.runAction,
            },
            {
              icon: 'ios-share',
              onPress: this.runAction,
              disabled: true,
            },
          ]}
        />
      
    );
  }
}

export default withTheme(withSafeArea(ToolbarExample));

const styles = StyleSheet.create({
  screen: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

render() {
    const { onPressRow, rowData } = this.props;

    return (
       onPressRow(rowData)}
        withoutHeader
        withoutFooter
        rightComponent={}
      />
    );
  }
}

export default withTheme(ExampleLitItem);

/>
            }
            info="
    );
  }
}

export default withTheme(withSafeArea(IconsExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingVertical: 10,
  },
});

<img>}
        renderSectionHeader={({ section }) =&gt; (
          {section.title}
        )}
        keyExtractor={(item, index) =&gt; `${item}_${index}`}
        refreshing={this.state.refreshing}
        onRefresh={this.refresh}
      /&gt;
    );
  }
}

export default withTheme(withSafeArea(CollectionExample));

const styles = StyleSheet.create({
  sectionHeader: {
    backgroundColor: 'rgba(255,255,255,0.5)',
  },
});

<button style="{[styles.button," color="{customColor}" disabled="">
          Custom button (centered/disabled)
        </button>
      
    );
  }
}

export default withTheme(withSafeArea(Buttons));

const customColor = '#FF3A30';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    paddingHorizontal: 15,
  },
  button: {
    marginVertical: 5,
  },
  combineButtonsContainer: {
    flexDirection: 'row',
    marginVertical: 5,
  },
  roundedButton: {