My Take on React Native

// ♥ > npm install -g expo-cli
// ♥ > expo init <ProjectName>
  • <View>: Similar to a non-scrolling <div> to use as a container
  • <Text>: Used like a <p> for adding text
  • <Image>: Like an <img> for displaying images
  • <ScrollView>: Similar to a scrolling <div> to use as a scrolling container
  • <TextInput>: Used like an <input> of type "text" to allow a user to enter text
import React from 'react';
import { View, Text, Image, ScrollView } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text>Some text</Text>
<View>
<Image
source={{
uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
}}
style={{ width: 200 }}
/>
<Text>This is a picture of a cat on a car</Text>
</View>
</ScrollView>
)
}
export default App
import React from 'react';
import { Text, View } from 'react-native';
const StyleExample = () => {
return (
<View style={styles.container}>
<Text>I'm in the center and have a grey background</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey'
}
})
export default StyleExample

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learn React.js Basics — For Beginners

How to get started with Angular

Medium bd used ptoblem please solved

@Shoot_Scope_SEO: Please check our Vimeo page https://t.co/Q4kSLcwicW

My favorite VS Code tips

You know Javascript ? Store stuff with a database 💽

fire-form ~Create contact form in 5 minutes for free ~

Create a React Native App on an Android emulator.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Valerie Foster

Valerie Foster

Software Engineer

More from Medium

REACT NATIVE & Its Working Principle

Google Map Integration Into React- Native Project on Android

What is React Native?

Usage of SafeAreaView and View in React native

Without SafeAreaView page contents display