rmc-picker@5.0.10

React Mobile Picker Component(web and react-native)

import { View, TouchableHighlight, StyleSheet, Text, ScrollView } from 'react-native';
import Popup from '../src/Popup';
import PopupStyles from '../src/PopupStyles';
import * as React from 'react';

const styles = StyleSheet.create({
  button: {
    borderWidth: 1,
    borderColor: 'red',
    padding: 5,
    width: 100,
  },
  root: {
    paddingTop: 100,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  content: {
    padding: 100,
    justifyContent: 'center' as any,
    alignItems: 'center' as any,
  },
});

export class PopupExample extends React.Component<{}, {}> {
  render() {
    const popupContent = (<View style={styles.content}><Text>
      popupContent
    </Text></View>);

    return (<ScrollView style={{ flex: 1 }}>
      <View style={{ height: 200 }}/>
      <Popup
        styles={PopupStyles}
        style={styles.root}
        title={'title'}
        content={popupContent}
      >
        <TouchableHighlight activeOpacity={0.5} style={[styles.button]} underlayColor="#a9d9d4">
          <Text>show popup</Text>
        </TouchableHighlight>
      </Popup>
      <View style={{ height: 800 }}/>
    </ScrollView>);
  }
}

export const Demo = PopupExample;
export const title = 'popup';
Fork me on GitHub