import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text>Some text</Text>
<View>
<Text>Some more text</Text>
<Image
source={{
uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
}}
style={{ width: 200, height: 200 }}
/>
</View>
<TextInput
style={{
height: 40,
borderColor: 'gray',
borderWidth: 1
}5t = }
defaultValue="You can type in me"
/>
</ScrollView>
);
}
export default App;
components
component will render a TEXT element:
JSX
React and React Native use JSX, a syntax that lets you write elements inside JavaScript
props
Props is short for “properties.” Props let you customize React components.
const Cat = (props) => {
return (
<View>
<Text>I am also a {props.name}</Text>
</View>
)
}
const App = () => {
return (
<View>
<Text>Welcome</Text>
<Cat name="Maru" />
<Cat name="Jelly" />
<Cat name="Cheese" />
</View>
);
state
While you can think of props as arguments you use to configure how components render, state is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!
const Cat = (props) => {
const [isHungry, setIsHungry] = useState(true);
return (
<View>
<Text>I am {props.name}, and I am {isHungry ? "hungry" : "full"}!</Text>
<Button
onPress={() => {
setIsHungry(false);
}}
disabled={!isHungry}
title={isHungry ? "pour me some milk, plsease" : "Thank you!"} />
</View>
)
}
const App = () => {
return (
<>
<Cat name="Maru" />
<Cat name="Jelly" />
</>
);
}
TextInput is a Core Component that allows the user to enter text.
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={text => setText(text)}
defaultValue={text}
/>
generic scrolling container that can contain mulple components and views.
<ScrollView>
...
</ScrollView>
The ScrollView works best to present a small amount of things of a limited size.