1
import React, { useState } from 'react'
2
import { Text, TextInput, View } from 'react-native'
3

4
const PizzaTranslator = () => {
5
  const [text, setText] = useState('')
6

7
  return (
8
    <View style={{ padding: 100 }}>
9
      <TextInput
10
        style={{ height: 40 }}
11
        placeholder="Type here to translate!"
12
        onChangeText={newText => setText(newText)}
13
        defaultValue={text}
14
      />
15
      <Text style={{ padding: 10, fontSize: 42 }}>
16
        {text
17
          .split(' ')
18
          .map(word => word && '🍕')
19
          .join(' ')}
20
      </Text>
21
    </View>
22
  )
23
}
24

25
export default PizzaTranslator

1
import React from 'react'
2
import { Image, ScrollView, Text } from 'react-native'
3

4
const logo = {
5
  uri: 'https://reactnative.dev/img/tiny_logo.png',
6
  width: 64,
7
  height: 64,
8
}
9

10
const App = () => (
11
  <ScrollView>
12
    <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
13
    <Image source={logo} />
14
    <Image source={logo} />
15
    <Image source={logo} />
16
    <Image source={logo} />
17
    <Image source={logo} />
18
    <Text style={{ fontSize: 96 }}>If you like</Text>
19
    <Image source={logo} />
20
    <Image source={logo} />
21
    <Image source={logo} />
22
    <Image source={logo} />
23
    <Image source={logo} />
24
    <Text style={{ fontSize: 96 }}>Scrolling down</Text>
25
    <Image source={logo} />
26
    <Image source={logo} />
27
    <Image source={logo} />
28
    <Image source={logo} />
29
    <Image source={logo} />
30
    <Text style={{ fontSize: 96 }}>What's the best</Text>
31
    <Image source={logo} />
32
    <Image source={logo} />
33
    <Image source={logo} />
34
    <Image source={logo} />
35
    <Image source={logo} />
36
    <Text style={{ fontSize: 96 }}>Framework around?</Text>
37
    <Image source={logo} />
38
    <Image source={logo} />
39
    <Image source={logo} />
40
    <Image source={logo} />
41
    <Image source={logo} />
42
    <Text style={{ fontSize: 80 }}>React Native</Text>
43
  </ScrollView>
44
)
45

46
export default App

1
<ScrollView minimumZoomScale={1.0} maximumZoomScale={2.0}>
2
	<!-- ~~~ -->
3
</ScrollView>

1
import React from 'react'
2
import { FlatList, StyleSheet, Text, View } from 'react-native'
3

4
const styles = StyleSheet.create({
5
  container: {
6
    flex: 1,
7
    paddingTop: 22,
8
  },
9
  item: {
10
    padding: 10,
11
    fontSize: 18,
12
    height: 44,
13
  },
14
})
15

16
const FlatListBasics = () => {
17
  return (
18
    <View style={styles.container}>
19
      <FlatList
20
        data={[
21
          { key: 'Devin' },
22
          { key: 'Dan' },
23
          { key: 'Dominic' },
24
          { key: 'Jackson' },
25
          { key: 'James' },
26
          { key: 'Joel' },
27
          { key: 'John' },
28
          { key: 'Jillian' },
29
          { key: 'Jimmy' },
30
          { key: 'Julie' },
31
        ]}
32
        renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
33
      />
34
    </View>
35
  )
36
}
37

38
export default FlatListBasics

1
import React from 'react'
2
import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar } from 'react-native'
3

4
const DATA = [
5
  {
6
    title: 'Main dishes',
7
    data: ['Pizza', 'Burger', 'Risotto'],
8
  },
9
  {
10
    title: 'Sides',
11
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
12
  },
13
  {
14
    title: 'Drinks',
15
    data: ['Water', 'Coke', 'Beer'],
16
  },
17
  {
18
    title: 'Desserts',
19
    data: ['Cheese Cake', 'Ice Cream'],
20
  },
21
]
22

23
const SectionListBasics = () => (
24
  <SafeAreaView style={styles.container}>
25
    <SectionList
26
      sections={DATA}
27
      keyExtractor={(item, index) => item + index}
28
      renderItem={({ item }) => (
29
        <View style={styles.item}>
30
          <Text style={styles.title}>{item}</Text>
31
        </View>
32
      )}
33
      renderSectionHeader={({ section: { title } }) => <Text style={styles.header}>{title}</Text>}
34
    />
35
  </SafeAreaView>
36
)
37

38
const styles = StyleSheet.create({
39
  container: {
40
    flex: 1,
41
    paddingTop: StatusBar.currentHeight,
42
    marginHorizontal: 16,
43
  },
44
  item: {
45
    backgroundColor: '#f9c2ff',
46
    padding: 20,
47
    marginVertical: 8,
48
  },
49
  header: {
50
    fontSize: 32,
51
    backgroundColor: '#fff',
52
  },
53
  title: {
54
    fontSize: 24,
55
  },
56
})
57

58
export default SectionListBasics