We Keep Coding

How to call a function to main App file? React Native

I have just started learning React Native. I am trying to insert bottom menu tabs on my first app.
I am using this code on Tabs.js (this is just the export part):
export default function Tabs() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Unfortunately, I don't know how to call it to my main App file (this is just one of my attempts):
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
Tabs();
I've read about exporting default function, but I don't understand how to use it in my main App file. I'm sure that this is a syntax issue.
Also, I am planning to add a background colour to all tabs. Any advice?
Thank you.
UPDATE:
This is my Tabs file.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Tabs = () => {
function Feed() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function Profile() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function MainPage() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="pill" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="format-list-text" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
export default Tabs
This is my main App file.
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
const App=()=>{
return <Tabs />
}

Make sure to export the App as default. You most probably have a file called index.js in the root folder and that is importing your App component.
Your App.js file should look like this:
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
export default const App=()=>{
return <Tabs />
}
And then your index.js file looks like this:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You don't necessarily have to export as default, because you can only have one default export. If you export App as default you import it like this: import App from './App'; and if you export without a default, you have to import like this: import {App} from './App'
And to get an advice how to add background color to the tabs, check here: How to set the background color of Tab.Navigator?

you basically call it like would call a component
btw your Tabs should export like this
const Tabs=()=>{
/...
}
export default Tabs
const App=()=>{
return <Tabs />
}

React native navigation not displaying stack screen

I'm using React Native Navigation dependency as route. But I have problem in the following code which appears to do nothing.
I'm trying to create 2 screens, one is login, the other is register (later on I will add button to move between them, right now even the default screen doesn't work).
App.JS
import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import Login from './login.js';
export default function App() {
return (
<View>
<StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ffffff" translucent={true}/>
<Login/>
</View>
);
}
Login.JS
import React from 'react';
import Register from './register.js';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function LoginScreen() {
return (
<View style={{ flex: 1, paddingTop: 100, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function Login() {
return (
<View style={styles.container}>
<Text style={styles.logo}>My Title</Text>
<Text style={styles.slogan}>Welcome</Text>
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={Register} />
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
export default Login;
By reading the docs that should work, but I can't understand what is wrong here.
I receive blank area in the stack screen area.
I have tried to replace Register component with function, didn't work either.
How can I display React Native Navigation stack screen correctly?

How about having the Navigation Container wrap the contents of App.js then you can leave the Stack navigator and screens in the Login component

The container around your navigation has a background-color, so remove all background-color around it and see again.

Is there a way to make a homescreen for an app instead of App.js, with React Native Navigation?

I am a beginner to React Native and have encountered a problem with navigation. I want my App.js screen to be used for navigation, but I want another file to be the home screen. Is there any way to do this?
This is my App.js code:
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {HomeScreen} from './components/HomeScreen';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Login: {screen: LoginScreen},
});
const App = createAppContainer(MainNavigator);
export default App;
And this is the code of the page I want to make my home screen:
import React from 'react';
import {SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, TouchableOpacity} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
class HomeScreen extends Component {
render() {
const {navigate} = this.props.navigation;
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Image style={styles.logo} source={require('./components/images/img1.jpg')} />
<Image style={styles.logo} source={require('./components/images/img2.jpg')} />
<Image style={styles.logo} source={require('./components/images/img3.jpg')} />
<Image style={styles.logo} source={require('./components/images/img4.jpg')} />
<Image style={styles.logo} source={require('./components/images/img7.jpg')} />
<Image style={styles.logo} source={require('./components/images/img8.jpg')} />
</ScrollView>
</SafeAreaView>
</>
);
};
}
Thanks.

To make any screen initial you should set it as initialRouteName option like:
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Login: LoginScreen,
}, {
initialRouteName: "Home"
}
);
To be able to import HomeScreen (or any other) from another file you need to export it from that file first. That part is missing from your example.
import * as React from 'react';
import { Button, View, Text } from 'react-native';
export default class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
Here is full snack example for your case, it is extended from react-navigation basic example, do check their documentation.

React-Native : ScrollView not showing the full content

I'm building an app with React-Native and for my Home Page im using the ScrollView but it doesn't show the full content. I have e header on the top so that may be blocking the full content or i don't know.
The code :
import React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";
import Content from "../components/Content/content";
import Header from "../components/Header/header";
import Carousel1 from "../components/Carousel/index";
import Buttons from "../components/Buttons/buttons";
export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
let drawerLabel = "Home";
return { drawerLabel };
};
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView style={{flex:1}}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f9f9f9"
}
});
Any idea how to fix this?

Try it with react native Flatlist instead of ScrollView:
React-native Flatlist

Try using contentContainerStyle instead of style with ScrollView.
Since I don't have access to your Carousel1 , Content, and Buttons component to give you a certain answer, I suggest you try the following:
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView contentContainerStyle={{ flexDirection:"column" }}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
Report back with your results.

Remove style={{flex:1}} from ScrollView and see

react navigator issue for undefined this.props.navigation.navigate

my head is crack up now with this navigation, i watched several videos about this and follow them but still hitting the same error of undefined is not an object error for this.props.navigation.navigate
here is my code basically
App.js
import React from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
import Home from './Home';
import Details from './Details';
export default createStackNavigator(
{
Home: {
screen: Home
},
Details: {
screen: Details
}
},
{
initialRouteName: 'Home',
}
);
Here is my Home.js
import React, { Component } from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';
class Home extends Component {
constructor(){
super();
this.state = {
data: []
};
}
getData(){
return fetch('https://testdata.com')
.then((response) => response.json())
.then((responseJson) => {
console.log(JSON.stringify(responseJson.result));
this.setState({data:responseJson.result});
//alert(responseJson.result[1].name);
//return responseJson.result[1].name;
})
.catch((error) => {
console.error(error);
});
}
componentDidMount(){
this.getData();
}
static navigationOptions = ({navigation}) => {
const {state, navigate} = navigation;
return {
title: "test",
headerStyle: {
backgroundColor: '#4050B5',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
},
};
};
render() {
let yytCardData = this.state.data.map(function(cardData, i){
return (
<ListItem key={cardData.ver}>
<Left>
<Text>{cardData.name}</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
<Button transparent info onPress={() => this.props.navigation.navigate('Details')}>
<Text>Info</Text>
</Button>
</Right>
</ListItem>
)
});
return (
<Container>
<Content>
<List>
{yytCardData}
</List>
</Content>
<Footer>
<FooterTab>
<Button vertical active>
<Icon name="apps" />
<Text>Title List</Text>
</Button>
<Button vertical>
<Icon name="search" />
<Text>Search</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
export default Home
and a very empty Details.js
import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Text, Left, Right, Icon } from 'native-base';
class Details extends Component {
render() {
return(
<Container>
<Header />
<Content padder>
<Card transparent>
<CardItem>
<Body>
<Text>
This is just a transparent card with some text to boot.
</Text>
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default Details;
i am not sure which part is incorrect in this case but doing just a simple navigation sounds very complex

You need to bind your function using the arrow function in your render method.
let yytCardData = this.state.data.map((cardData, i) => { // Replace function with arrow function

The issue is with scope in Home component this.state.data.map(function(cardData, i){. If you don't want to use arrow function then you can use the same function but just assigning this to a local variable and use that
let yytCardData = this.state.data.map(function(cardData, i){
let that = this;
return (
<ListItem key={cardData.ver}>
<Left>
<Text>{cardData.name}</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
<Button transparent info onPress={() => that.props.navigation.navigate('Details')}>
<Text>Info</Text>
</Button>
</Right>
</ListItem>
)
});
If you want to use arrow function then follow what Pritish Vaidya mentioned