react native paper
// noice library to use with react native paper import { PaperSelect } from 'react-native-paper-select'; // ... const [colors, setColors] = useState({ value: '', list: [ { _id: '1', value: 'BLUE' }, { _id: '2', value: 'RED' }, { _id: '3', value: 'GREEN' }, { _id: '4', value: 'YELLOW' }, { _id: '5', value: 'BROWN' }, { _id: '6', value: 'BLACK' }, { _id: '7', value: 'WHITE' }, { _id: '8', value: 'CYAN' }, ], selectedList: [], error: '', }); <PaperSelect label="Select Colors" value={colors.value} onSelection={(value: any) => { setColors({ ...colors, value: value.text, selectedList: value.selectedList, error: '', }); }} arrayList={[...colors.list]} selectedArrayList={colors.selectedList} errorText={colors.error} multiEnable={true} textInputMode="flat" searchStyle={{ iconColor: 'red' }} />;
Source: www.npmjs.com
react native paper
I've discovered ReactNative provides a way to inspect DOM of application (with android, shake device, toggle inspect). It turns out my menu item was shadowed by Context.Consumer. When I removed <Provider> tags from my render () section, it finally worked (was able to handle clicks). Probably worth mentioning: from the very beginning my AppContainer at the top most level was wrapped like this: <PaperProvider> <StatusBar backgroundColor={Colors.TOOLBAR_BACKGROUND} barStyle="light-content" /> <AppContainer /> </PaperProvider>
react native paper
import * as React from 'react'; import { AppRegistry } from 'react-native'; import { Provider as PaperProvider } from 'react-native-paper'; import { name as appName } from './app.json'; import App from './src/App'; export default function Main() { return ( <PaperProvider> <App /> </PaperProvider> ); } AppRegistry.registerComponent(appName, () => Main);
Source: callstack.github.io
react native paper install
yarn add react-native-vector-icons react-native link react-native-vector-icons
Source: callstack.github.io