Scribd
Upload
6 views

React Native Basics

Uploaded by

mitaldhaduk05
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

React Native Basics

Uploaded by

mitaldhaduk05
Copyright
© © All Rights Reserved
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