необычное нарушение инварианта при использовании expo с react native

Question

Я получаю очень странную ошибку, связанную с использованием компонентов, и я понятия не имею, что это значит. Я знаю, что это как-то связано с тем, что я не использую компонент должным образом, и что это нарушение инварианта, но кроме этого, я понятия не имею. Я получаю сообщение об ошибке только на мобильном устройстве, используя приложение expo, но не на P C. Я прикрепил свой код ниже, и любые предложения приветствуются. Спасибо. ошибка

import * as React from 'react';
import { StyleSheet, Button, TextInput, Image } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { makeStyles } from '@material-ui/core/styles';

const accordions = [
  {
    heading: 'button one',
    extraText: ''
  }, 
  {
    heading: 'button two',
    extraText: ''        
  }
];

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
}));

function createNewPost () {

  return (

    <Accordion>

          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography>Testing</Typography>

          </AccordionSummary>

          <AccordionDetails>
            <Typography>
              Testing
            </Typography>
          </AccordionDetails>

    </Accordion>


  )

}



export default function NewsScreen({ navigation }: { navigation: any }) {
  const classes = useStyles();
  return (


    <View style={styles.container}>

      <View>
          <Text style={{fontWeight: 'bold', fontSize: 20}}> News </Text>
      </View>

      <View> 

      <Button
          onPress={createNewPost()}
          title="Add post"
          color="blue"
          accessibilityLabel="A button to allow the admin to create a new post"
      />
      </View>

      <View style={styles.accord}>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography className={classes.heading}>
              <Text> Moore Park Lift Outage </Text> 
            </Typography>

            <Typography>

              <Image        
                  source={{
                    
                    uri: 'https://i.imgur.com/Etr5xBn.png'
                                      
                  }}
                  style={{width: "20px", height: "20px", marginLeft: "10px"}}
              >            
              </Image>

            </Typography>

          </AccordionSummary>
          <AccordionDetails>
            <Typography>
                <Text style={{fontWeight: 'bold'}}>
                  UPDATED 6 Aug 09:30 {'\n'} 
                  Details: Ongoing {'\n'} 
                  Lift 2 at Moore Park Light Rail is temporarily out of service. For assistance, ask staff.. {'\n'} 
                </Text>
                <Image        
                  source={{
                    uri: 'https://svg-clipart.com/svg/blue/PGaAIh0-blue-wheelchair-vector.svg',
                  }}
                  style={{width: "70px", height: "90px", marginTop: "30px"}}
                >            
                </Image>
          </Typography>
          </AccordionDetails>
        </Accordion>

        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography className={classes.heading}>Dulwich Hill Line running slow</Typography>

            <Typography>

              <Image        
                  source={{

                    uri: 'https://i.imgur.com/iNjXQMW.png'
                  }}
                  style={{width: "20px", height: "20px", marginLeft: "10px"}}
              >            
              </Image>

            </Typography>



          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              The Dulwich Hill Line is running slow due to track-work being conducted between Lilyfield and Rozelle Bay
          </Typography>
          </AccordionDetails>
        </Accordion>

        <Accordion >
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography className={classes.heading}>Extra services running</Typography>

            <Typography>

              <Image        
                  source={{
                    
                    uri: 'https://imgur.com/Etr5xBn'
                                      
                  }}
                  style={{width: "20px", height: "20px", marginLeft: "10px"}}
              >            
              </Image>

            </Typography>

            <Typography>

              <Image        
                  source={{
                    
                    uri: 'https://i.imgur.com/Etr5xBn.png'

                  }}
                  style={{width: "20px", height: "20px", marginLeft: "10px"}}
              >            
              </Image>

            </Typography>

          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              Extra services will be running this week to help students get back to school
          </Typography>
          </AccordionDetails>
        </Accordion>
      </View>

      <View style={styles.button}>
        <Button
          onPress={() => navigation.navigate('HomeScreen')}
          title="Go back"
          color="blue"
          accessibilityLabel="A button to click so that you can go back to the home page"
        />

      </View>
      
    </View>


  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: 'column',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    alignItems: 'center',
    justifyContent: 'center',

  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
  button: {
    margin: 10,
    flexDirection: 'row',
  },
  news:{
    flexDirection:'column',
    backgroundColor: 'white',
  },
  eachnews:{
    margin: 500,
    fontWeight: 'bold',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    
  },
  textnews:{
    fontSize: 20,
},
});