Styles are not showing in React Native. I'm new to RN so please if you can help me understand ..Here is the code :
import { template } from '#babel/core'
import React from 'react'
import { View , Text, SafeAreaView, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container : {
alignItems:'center',
backgroundColor:'pink',
},
})
const App = ()=>{
return(
<SafeAreaView>
<View style={styles.container}>
<Text>Hello World!!</Text>
</View>
</SafeAreaView>
)
}
export default App
So, I found the answer after half an hour. It's just i needed to rerun the application and it worked. Also flex :1 helps.
Related
Im actually writing a code in React native but while using react-icon I still don't know how to import an icon on my project.
I've tried with components such as Image but I don't see them on my Screen.
Please help me, below I share the code:
import { StyleSheet,Image, View, } from 'react-native';
import { AiOutlineHome } from 'react-icons/ai';
export function Navbar() {
return (
<View style={style.nav}>
<Image
style={style.navIcon}
source={<AiOutlineHome/>}
/>
</View>
)
}
const style = StyleSheet.create({
nav:{
width:'100%',
height:50,
position:'absolute',
top:702,
},
navIcon:{
color:'red',
resize:'cover'
}
})
react-icons is not designed to be used with React Native.
Try this library - https://github.com/oblador/react-native-vector-icons
I am going to implement a react native footer menu (bottom tam navigator). But I got some errors on running it.
this is my drawer.js file
import React,{Component} from 'react';
import {View,Text,StyleSheet} from "react-native";
import {createAppContainer}from "react-navigation";
import {createMaterialBootomTabNavigator} from "react-navigation-material-bottom-tabs";
import Homescreen from "./home.js";
class drawer extends React.Component{
render() {
return (
<View style={styles.container}>
<Text>drawer</Text>
</View>
);
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:"center",
alignItems:"center",
}
});
const TabNavigator=createMaterialBootomTabNavigator(
{
Home:{
screen:Homescreen,
}
},
{
initialRouteName:"home",
activeColor:"#f0edf6",
inactiveColor:"#3e2465",
barStyle:{ backgroundColor: '#694fad' },
}
);
export default createAppContainer(TabNavigator);
I had already installed the react-navigator.
By run it on my emulator I got this error.
how can I fix this?
Change createMaterialBootomTabNavigator to createMaterialBottomTabNavigator
I have initialized a React Native app with the CLI quickstart. The only thing I have edited is that I use CSS Modules for styling the component (note: className in stead of style). I want to typecheck the project with flow and if I run flow it gives the following error.
I Cannot create View element because property className is missing in object type [1] but exists in props [2].
What can I do?
// #flow
import React from "react";
import {
View,
Text
} from "react-native";
import styles from "./base.sass";
const App = () => {
const [title] = React.useState("Hello");
return (
<View className={styles.title}>
<Text>{title}</Text>
</View>
);
};
export default App;
It's not React.js, you can't use like that.
Here is an example.
import React from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
const App = () => {
const [title] = React.useState("Hello");
return (
<View style={styles.title}>
<Text>{title}</Text>
</View>
);
};
const styles = StyleSheet.create({
title: {
justifyContent: 'center',
alignItems: 'center',
}
});
export default App;
The className prop has been removed from View starting from 0.11:
https://github.com/necolas/react-native-web/issues/1146
Please check a version you use!
I'm using react-native-cli version 2.0.1 and react-native version 0.57.8. I am learning React native, and have encountered an issue when trying to render two different child components (Header and AlbumList) in the main App component.
Issue
The error disappears if I remove the <View> tags and AlbumList component in the index.js file (meaning only show one component). I have looked through threads like this, but am still unable to identify how I'm using the <View> tag incorrectly.
index.js
import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';
//>Create a component
const App = () => (
<View> <Header headerName={'Albums'} />
<AlbumList />
</View>
);
//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);
AlbumList.js
import React from 'react';
import { View, Text } from 'react-native';
const AlbumList = () => {
return (
<View><Text> Album List </Text></View>
);
};
export default AlbumList;
I think the issue isn't anything to do with the Header.js file, but sharing code nonetheless.
Header.js
import React from 'react';
import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements
// Make a component
const Header = (props) => {
const { textStyle, viewStyle } = styles;
return (
<View style = {viewStyle}>
<Text style = {textStyle}> {props.headerName}</Text>
</View>
);
};
const styles = {
viewStyle: {
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60
},
textStyle: {
fontSize: 20
}
};
export default Header;
Help is appreciated. Thanks in advance!
in your index.js file, replace App function with below,
//Create a component
const App = () => (
<View><Header headerName={'Albums'} /><AlbumList /></View>
);
there should be no space between components here
while using react native components, try to put each element in a new line, in this way you don't have to worry about spaces
const App = () => (
<View>
<Header headerName={'Albums'} />
<AlbumList />
</View>
);
Let me know if it works
In my case i had a misplaced semicolon as shown and it was giving me so much headache
<Screen>
<RestaurantScreen />; //Make sure you have no misplaced semicolon like in my case here
</Screen>
I use reactnavigation and I am hiding the statusbar at the top, but it leaves an empty space above the header.
I already tried paddingTop or marginTop, but none work.
This is how I hide the statusbar.
import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';
const App = () => (
<View style={{flex:1}}>
<StatusBar hidden={true} />
<Drawer />
</View>
);
export default App;
Any idea would be helpful.
Thanks.
How to Fix it
I add the following to the index.js:
import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';
import { SafeAreaView } from 'react-navigation';
SafeAreaView.setStatusBarHeight(0);
const App = () => (
<View style={{flex:1}}>
<StatusBar hidden={true} />
<Drawer />
</View>
);
export default App;
Basically added the SafeAreaView part.
Hope this is helpful for others.
Try the static function Status Bar. You might need to convert the component to a React Component/Pure Component. Try it with and without converting it.
componentDidMount(){
StatusBar.setHidden(true,true);
}