I'm developing iOS application with React Native and using Icon from native-base in the navigation bar.
However, some icons are not shown up as the icon I expected there.
This is my code.
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
import { Icon } from 'native-base';
export default class HomeTab extends Component {
static navigationOptions = {
tabBarIcon: ({tintColor}) => (
<Icon name='md-add-circle-outline' style={{color: tintColor}} />
)
};
render() {
return (
<View>
<Text>
HomeTab
</Text>
</View>
)
}
}
This code is supposed to show up the icon below.
https://gyazo.com/b9a19f8de26261cb62e834cd7a0ca867
But, in fact, the icon below is shown up.
https://gyazo.com/5476d5b168f51014038470d85381c9e9
This is, I think, the icon reference site.
And this is my package.json.
{
"name": "Sample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.12.1",
"react": "16.8.6",
"react-native": "0.59.7",
"react-native-gesture-handler": "^1.2.1",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.9.1"
},
"devDependencies": {
"#babel/core": "7.4.4",
"#babel/runtime": "7.4.4",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
In Icon component also specify type component, most of the time it works but sometimes it gives error.
type is the name of the font, eg: 'AntDesign', 'MaterialCommunityIcons', etc
you can search for almost all icons here
Related
Tailwind CSS in the native wind is not being applied on Screen components.
Is there any package or dependency that is missing in my project .
This is a package.json
{
"name": "first-app",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"expo": "~46.0.13",
"expo-status-bar": "~1.4.0",
"nativewind": "^2.0.11",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.2.0"
},
"private": true
}
Tailwind CSS is Applied on App.js but on screens components
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
export default function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
This is Screen Component where native wind ( tailwind ) is not Applied
import { View, Text } from 'react-native'
import React from 'react'
const HomeScreen = () => {
return (
<View className="flex-1 text-center align-middle justify-center">
<Text className="bg-black text-white">App</Text>
</View>
)
}
export default HomeScreen
Firstly my tailwind.config.js Looks like this
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Then I CHANGED IT WITH FOLLOWING CODE. THE MAIN CHANGE WAS IN content part. By applying the above change tailwindcss started applying both in screens and components. This worked for me
module.exports = {
content:[
"./screens/**/*.{js,jsx,ts,tsx}",
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
I am very new to React native I am trying to show content it is showing from starting. But I have
To show the content from the container, but I don't know how to apply this in React native. So
So someone please help me how to use container in React native.
In this component I tried some code please check it once
This is App.js
import React from 'react';
import {View, Text} from 'react-native';
const App = props => {
return (
<View>
<Text>Hi Mark</Text>
</View>
);
};
export default App;
These are the packages I installed in my React native project
{
"name": "testone",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.3.2",
"#react-navigation/stack": "^5.3.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0"
},
"devDependencies": {
"#babel/core": "7.9.6",
"#babel/runtime": "7.9.6",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
Note I am not using expo I am using pure React native for app development.
Add margin style property to root View to make it like container
import React from "react";
import { Text, View } from "react-native";
const App = () => {
return (
<View style={{ margin:100 }}>
<Text>Hi There!</Text>
</View>
);
};
export default App;
I am trying to get a simple example of tab navigation to work in react native. It seems like examples online all assume that a tab navigation screen is the one and only screen in your app, which is not the case for me. In my app I will have a login page, and upon successful login there will be a tab navigation screen I call DashboardTabScreen. The app will have other (non tab) screens available (like Settings or Contact us, or whatever) and each of the tab screens will be the root of a stack of other "detail" screens.
So here is my App.js:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from "./src/screens/LoginScreen";
import DashboardTabScreen from "./src/screens/DashboardTabScreen";
const navigator = createStackNavigator(
{
Login: LoginScreen,
DashboardTab: DashboardTabScreen
},
{
initialRouteName: "Login",
defaultNavigationOptions: {
title: "App"
}
}
);
export default createAppContainer(navigator);
And here is my DashboardTabScreen.js
import React, {Component} from "react";
import { Text, StyleSheet, View } from "react-native";
import { createBottomTabNavigator } from 'react-navigation-tabs';
const FirstScreen = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>First!</Text>
</View>
);
}
const SecondScreen = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Second!</Text>
</View>
);
}
const DashboardTabScreen = createBottomTabNavigator(
{
First: {
screen: FirstScreen,
},
Second: {
screen: SecondScreen,
}
}
);
export default DashboardTabScreen;
When I run the app, it goes to the Login screen as expected. Upon successful login, it should go to this dashboard tab screen. Instead it throws an error:
Invariant violation: Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got undefined. You likely forgot to export
your component from the file it is defined in, or you might have mixed up default and named
imports.
And here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.4.1",
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "^5.2.6",
"#react-navigation/stack": "5.2.3",
"expo": "~36.0.0",
"n": "^6.5.1",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.7.0",
"react-navigation": "^4.3.9",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^1.2.0",
"stable": "^0.1.8"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0"
},
"private": true
}
So what is wrong with my code?
I had tried your code it's working perfectly, there is no error in your code:
I think the problem is with react-navigation-tabs version:
change :
"react-navigation-tabs": "^1.2.0",
to
"react-navigation-tabs": "^2.8.7"
Hope this helps!
The problem is with the react-navigation-tabs try to upgrade and then check it.
I am beginner is React Native, I have created a sample application and trying to add react-navigation
here is my code in App.js
import React, {Fragment} from 'react';
import {
StyleSheet,
View,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Container from './ScreenContainer';
const App = () => {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#819ca9" barStyle="light-content" hidden={true}></StatusBar>
</View>
);
};
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
backgroundColor:'#819ca9',
flex: 1,
// alignItems:"center"
},
});
export default App;
And this is my ScreenContainer.js
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import login from './pages/login'; //import Login from './pages/login';
const NavigationStack = createStackNavigator({
SignUp: login
});
const Container = createAppContainer(NavigationStack);
export default Container;
When I use this js in my App.js everything goes blank, after research a lot I found if I comment alignItems:"center" then my screen comes bt everything get distorted, search a lot on internet couldn't found the proper solution
Here is my package.json
{
"name": "MobileAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-router-flux": "^4.0.6",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "^6.0.1",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Can anyone help me how to make this working without disturbing my UI.
Thanks a lot
I see that you’ve imported Container in your App.js but I can’t see it being used anywhere.
I am trying to build the taxi booking app. From i get the error
undefined is not an object (evaluating'_react2.Proptypes.store'). I have tried all the other solutions in previously asked but it was not helpful. Any help on this is appreciated.
import React, { Component, PropTypes} from "react";
import { Router } from "react-native-router-flux";
import scenes from "../routes/scenes";
import { Provider } from "react-redux";
export default class AppContainer extends Component{
static propTypes = {
store: PropTypes.object.isRequired
}
render(){
return(
<Provider store = {this.props.store}>
<Router scenes = {scenes} />
</Provider>
)
}
}
package.json
{
"name": "TaxiApp",
"version": "0.0.7",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.3.5",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-addons-update": "^15.6.2",
"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Ever since react version 16.0.0 forward, prop types cannot be taken from React itself as you did on the first line. You need to do the following;
npm install prop-types --save
Add the following import and remove the PropTypes from first line:
import PropTypes from 'prop-types';
After this, it should work like a charm.