Scribd
Upload
7 views

React Native Basics

Uploaded by

mitaldhaduk05
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

React Native Basics

Uploaded by

mitaldhaduk05
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

create projct

npm install -g create-react-native-app appname


npm install -g react-native-cli
npm run eject
npm react-native run-android

CTRL+M - enable hot reading on emulaotr

Concepts
State and props
Styling
Const styles = StyleSheet.create ({})

flexbox
flexDirection - column,row
justifycontents - flex-start,flex-end,center, space-around, space-between
alignments - center, flex-start, flex-end, stretched

ListView
map()==> names.map((item, index) => (
<Text>item.name</Text>
))

TextInput
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Email"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}
/>

ScrollView
<ScrollView>Content to show in scroll mode</ScrollView>

Images
<Image source = {require('Path/logo.png')} />

network images
<Image source =
{{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png
'}}
style = {{ width: 200, height: 200 }}
/>

HTTP
=> Get
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});

=>Post
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});

Buttons :
<Button
onPress = {handlePress}
title = "Red button!"
color = "red"
/>

Touchable Opacity - opacity of an element when touched


<TouchableOpacity></TouchableOpacity>

Touchable Highlight - on press element, it will get darker and the underlying
color will show through
<TouchableHighlight></TouchableHighlight>

Touchable Native Feedback - simulate ink animation when the element is pressed
<TouchableNativeFeedback></TouchableNativeFeedback>

Touchable Without Feedback - This should be used when you want to handle the touch
event without any animation
<TouchableWithoutFeedback></TouchableWithoutFeedback>

Animations
- pending

Router
installation - npm i react-native-router-flux --save
<Router>
<Scene key = "root">
<Scene key = "home" component = {Home} title = "Home" initial = {true} />
<Scene key = "about" component = {About} title = "About" />
</Scene>
</Router>

View
<View></View>
WebView
<WebView></WebView>

Modal
<Modal></Modal>

ActivityIndicator - loader
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>

Picker - combobox
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
<Picker.Item label = "Steve" value = "steve" />
<Picker.Item label = "Ellen" value = "ellen" />
<Picker.Item label = "Maria" value = "maria" />
</Picker>

StatusBar
barStyle => dark-content, light-content, default.
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor =
"#00BCD4" translucent = {true}/>

Switch
<SwitchExample
toggleSwitch1 = {this.toggleSwitch1}
switch1Value = {this.state.switch1Value}/>

Text
<Text></Text>

Alert
const showAlert = () =>{
Alert.alert(
'You need to...'
)
<TouchableOpacity onPress = {showAlert} style = {styles.button}>
<Text>Alert</Text>
</TouchableOpacity>

GeoLocation

You might also like