title: React native app stuck on white screen without any errors
body: <p>I am learning React native and was trying to build an app. However, the app is stuck on a white screen and doesn't show anything nor gives any error. This code is going to render a flatlist from an array and will have a delete to swipe button on the right. I am not getting any errors though.</p>
  <p><a href="https://i.stack.imgur.com/CLXgS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CLXgS.png" alt="enter image description here" /></a></p>
  <p>Message.js</p>
  <pre><code>import React, { useState } from 'react'
  import {
    View,
    Text,
    StyleSheet,
    FlatList,
    SafeAreaView,
    StatusBar,
    ItemSeparatorComponent,
    Platform
  } from 'react-native'
  
  import ListItem from '../components/ListItem'
  import ListItemSeparator from '../components/ListItemSeparator'
  import DeleteSwipe from '../components/DeleteSwipe'
  const messages = [
    {
      id: 1,
      name: 'T1',
      description: 'D2',
      image: require('../assets/mosh.jpg')
    },
    {
      id: 2,
      name: 'T2',
      description: 'D2',
      image: require('../assets/mosh.jpg')
    },
    {
      id: 3,
      name: 'T3',
      description: 'D3',
      image: require('../assets/mosh.jpg')
    },
    {
      id: 4,
      name: 'T4',
      description: 'D4',
      image: require('../assets/mosh.jpg')
    }
  ]
  export default function Message () {
    const [messages, setMessage] = useState(messages)
  
    const handleDelete = messages =&gt; {
      const newMessages = messages.filter(m =&gt; m.id != messages.id)
      setMessage(newMessages)
    }
  
    return (
      &lt;SafeAreaView style={styles.screen}&gt;
        &lt;FlatList
          data={messages}
          keyExtractor={messages =&gt; messages.id.toString()}
          renderItem={({ item }) =&gt; (
            &lt;ListItem
              name={item.name}
              description={item.description}
              image={item.image}
              onPress={() =&gt; console.log('touched', item)}
              renderRightActions={() =&gt; (
                &lt;DeleteSwipe onPress={() =&gt; handleDelete(item)} /&gt;
              )}
            /&gt;
          )}
          ItemSeparatorComponent={ListItemSeparator}
        /&gt;
  
        &lt;FlatList /&gt;
      &lt;/SafeAreaView&gt;
    )
  }
  
  const styles = StyleSheet.create({
    screen: {
      padding: Platform.OS === 'android' ? StatusBar.currentHeight : 0
    }
  })
  </code></pre>
  <p>DeleteSwipe.js</p>
  <pre><code>import React from 'react'
  import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native'
  import Swipeable from 'react-native-gesture-handler/Swipeable'
  import { AntDesign } from '@expo/vector-icons'
  
  const DeleteSwipe = props =&gt; {
    const { renderRightActions } = props
    return (
      &lt;TouchableWithoutFeedback onPress={console.log('delete it')}&gt;
        &lt;View style={styles.container}&gt;
          &lt;AntDesign name='delete' size={24} color='white' /&gt;
        &lt;/View&gt;
      &lt;/TouchableWithoutFeedback&gt;
    )
  }
  const styles = StyleSheet.create({
    container: {
      width: 70,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#ff5252'
    }
  })
  
  export default DeleteSwipe
  </code></pre>