-
-
Save id-ilych/e60fa12ded83d331528bdaeae59c895d to your computer and use it in GitHub Desktop.
React Native "ref" playground
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import { Button, Text, TextInput, View, StyleSheet } from 'react-native'; | |
import Constants from 'expo-constants'; | |
// You can import from local files | |
import AssetExample from './components/AssetExample'; | |
// or any pure javascript modules available in npm | |
import { Card } from 'react-native-paper'; | |
export default function App() { | |
const [text, setText] = React.useState("dummy"); | |
const form = React.useRef({}); | |
return ( | |
<View style={styles.container}> | |
<Text style={styles.paragraph}> | |
{text} | |
</Text> | |
<Button title="Copy" onPress={() => setText(form.current.input1())}/> | |
<MyComponent form={form.current} formKey="input1" /> | |
</View> | |
); | |
} | |
function MyComponent({form, formKey}) { | |
return <TextInput | |
ref={ref => { form[formKey] = () => ref._lastNativeText } } | |
style={styles.input} | |
/> | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
justifyContent: 'center', | |
paddingTop: Constants.statusBarHeight, | |
backgroundColor: '#ecf0f1', | |
padding: 8, | |
}, | |
paragraph: { | |
margin: 24, | |
fontSize: 18, | |
fontWeight: 'bold', | |
textAlign: 'center', | |
}, | |
input: { | |
flex: 1, | |
fontSize: 16, | |
color: "#000000", | |
fontFamily: 'RodchenkoCTT', | |
padding: 5, | |
borderWidth: 1, | |
borderColor: "#000000", | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment