Introduction to interactive application development
by
Shubham Singh (@shobulive)
React Native Library
JS Engine
React JS
App Code (JS)
RN JS Library
Native UI
Native APIs
Native / Bridge Interface
React.useContest()
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
const TextComponent = ({count}) => (
<View>
<Text>
You clicked {count} times
</Text>
</View>
);
const App = () => {
const [count, setCount] = React.useState(0);
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={() => setCount(count + 1)}
>
<Text>Click me</Text>
</TouchableOpacity>
<TextComponent count={count}>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: 10
}
})
export default App;
Pre steps:
Alternative:
Find Me :)