Scribd
Upload
5 views2 pages

React Native Syntax Quick Guide

The document provides a quick overview of React Native syntax, highlighting the basic component structure and essential components like View, Text, StyleSheet, Image, Pressable, TextInput, and FlatList. It also mentions the use of hooks such as useState() and useEffect(), as well as platform-specific code. This serves as a concise reference for developers working with React Native.

Uploaded by

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

React Native Syntax Quick Guide

The document provides a quick overview of React Native syntax, highlighting the basic component structure and essential components like View, Text, StyleSheet, Image, Pressable, TextInput, and FlatList. It also mentions the use of hooks such as useState() and useEffect(), as well as platform-specific code. This serves as a concise reference for developers working with React Native.

Uploaded by

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

React Native Syntax – Quick Notes

Basic Component Structure

import React from 'react';

import { View, Text } from 'react-native';

const App = () => {

return (

<View>

<Text>Hello World</Text>

</View>

);

};

View

Used as a container. Similar to div. Cannot show text directly.

Text

Used to display text. All text must be inside <Text>.

StyleSheet

[Link]({ box: { padding: 10 } })

Image

<Image source={{uri:'URL'}} style={{width:100,height:100}} />


Pressable

<Pressable onPress={() => {}}>

<Text>Tap Me</Text>

</Pressable>

TextInput

<TextInput value={text} onChangeText={setText} />

FlatList

<FlatList data={data} renderItem={({item}) => <Text>{[Link]}</Text>} />

Hooks

useState(), useEffect()

Platform

[Link] === 'android' ? value1 : value2

You might also like