Scribd
Upload
7 views

React Native Basics

Uploaded by

mitaldhaduk05
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy