React Native Sliders and Pickers Picker Slider Picker

React Native Sliders and Pickers

Picker Slider

Picker • Traditional way of choosing discrete inputs in both i. OS and Android apps • Used to be built-in, now must add a library npm install @react-native-picker/picker --save Or yarn add @react-native-picker/picker • Must import (Note that the component “Picker” is in curly brackets): import {Picker} from '@react-native-picker/picker'; https: //github. com/react-native-picker/picker

Picker (slide 1/3) See the picker. txt example on the class website import { Status. Bar } from 'expo-status-bar'; import React, {use. State} from 'react'; import { Style. Sheet, Text, View, Image } from 'react-native'; import {Picker} from '@react-native-picker/picker'; export default function App() { const [language, set. Lang] = use. State({lang: 'Java'}); return ( <View style={styles. container}> <Text>Your language is {language. lang}</Text>

Picker (slide 2/3) Determines what value is to be displayed initially <Picker selected. Value={this. state. language} style={styles. row, { height: 50, width: 100 }} Event handler on. Value. Change={(item. Value, item. Index) => this. set. State({language: item. Value})}> <Picker. Item label="Java" value="java" /> <Picker. Item label="Java. Script" value="js" /> <Picker. Item label="C++" value="cpp" /> <Picker. Item label="C" value="C" /> <Picker. Item label="Python" value="python" /> </Picker> </View> ); } Values to be displayed

Picker (slide 3/3) const styles = Style. Sheet. create({ container: { flex: 1, background. Color: '#fff', align. Items: 'center', justify. Content: 'center', }, row: { flex: 1, background. Color: '#FFFFFF', align. Items: 'center', justify. Content: 'center', }, });

Picker: making items dynamic • Create an array in state: export default function App() { const [language, set. Lang] = use. State({lang: 'Java'}); const [picker. Items, set. PItems] = use. State([{item: "Java", val: "java"}, {item: "Java. Script", val: "js"}, {item: "C++", val: "cpp"}, {item: "C", val: "c"}, {item: "Python", val: "python"} ]); Each array element is an object Each object has an item and a val

Picker: making items dynamic Use map with the state variable: <Picker selected. Value={language. lang} style={styles. row, {height: 300, width: 400}} on. Value. Change={(item. Value, item. Index) => set. Lang({lang: item. Value})}> {picker. Items. map((pitem, index) => ( <Picker. Item key={pitem. val} label={pitem} value={pitem. val} /> )) Need the “key” attribute to avoid a } “list requires unique key” error </Picker> See the picker 2. txt example on the class website

Slider • Traditional way of choosing dynamic input in both i. OS and Android apps • Used to be built-in, now must add a library npm install @react-native-community/slider --save Or yarn add @react-native-community/slider • Must then import: import {Slider} from '@react-native-community/slider'; https: //github. com/callstack/react-native-slider

Slider (1/3) add this to your App. js file Import the slider. Note that the component “Slider” is not in curly brackets: import Slider from ‘@react-native-community/slider’; After the “export default function App(){” line add: const [age, set. Age] = use. State('23'); See the slider. txt example on the class website

Slider (2/3) add this to your App. js file <Slider style={styles. row, { width: 200, height: 40 }} step={1} minimum. Value={18} maximum. Value={71} minimum. Track. Tint. Color=‘#CC 0001’ maximum. Track. Tint. Color=‘#55 B 54 C’ Event handler value={age} on. Value. Change={val =>set. Age({ age: val })} />

Slider (3/3) Rest of the code <Text style={styles. row}>You Picked {language. lang}</Text> <Text style={styles. row}>Your age is {age}</Text> const styles = Style. Sheet. create({ container: { </View> flex: 1, ); background. Color: '#fff', } align. Items: 'center', justify. Content: 'center', }, row: { flex: 1, background. Color: '#FFFFFF', align. Items: 'center', justify. Content: 'center', }, });