Skip to content

Instantly share code, notes, and snippets.

@id-ilych
Last active June 24, 2019 15:42
Show Gist options
  • Save id-ilych/e60fa12ded83d331528bdaeae59c895d to your computer and use it in GitHub Desktop.
Save id-ilych/e60fa12ded83d331528bdaeae59c895d to your computer and use it in GitHub Desktop.
React Native "ref" playground
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