React Native calling another .js inside App.js render - react-native

Question

Is it possible to call another render() inside my App.js render. I just start working with react native, so it might look stupid.
I create the following file. Splash.js
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default class Splash extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}></Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
fontSize: 18
}
})
How can I call it inside my App.js to be the default page?
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
// Call the Splash.js
)
}
}
Thanks

Answer 1

There is no need to call render() inside a render() function. You can convert your splash component into a functional component, which just returns the JSX:
import React from 'react';
import {View, Text} from 'react-native';
export default function Splash() {
return (
<View>
<Text>Splash</Text>
</View>
);
}
Your app component will then render the returned JSX like so:
import React from 'react'
import Splash from './your-path-to-the-splash-file'
export default class App extends React.Component {
render() {
return (
<View>
<Splash/>
</View>
);
}
};
You should check out the official react docs: https://reactjs.org/docs/components-and-props.html