So i made a custom header component and tried to put it in the stack bar title, but the view doesn't take the full space even when passing the width and height to 100%.i also tried flex :1 but that doesn't work also
// header.js
import React from 'react';
import {View,Text,Button,StyleSheet} from 'react-native'
//class Header extends React.Component {
//render(){
export default function Header(){
return (
<View style={styles.header}>
<View>
<Text style={styles.text}>MEDICLIC</Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
header: {
width:'100%',
height:'100%',
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#3498db',
},
text:{
fontWeight: '600',
color:'#ecf0f1',
fontSize: 32,
}
});
//export default Header
this is my app.js code where i used also a drawer navigation,
// APP.js
import React from 'react';
import Header from './Components/Header'
import { createDrawerNavigator } from 'react-navigation-drawer'
import {createAppContainer } from 'react-navigation'
import {createStackNavigator } from 'react-navigation-stack'
import ConnectionScreen from './Screens/ConnectionScreen';
import AccueilScreen from './Screens/AccueilScreen';
import AboutScreen from './Screens/AboutScreen';
export default class App extends React.Component {
render(){
return (
<AppNavigator/>
);
}
}
const AppDrawerNavigator = createDrawerNavigator({
Accueil:{
screen: AccueilScreen
},
SeConnecter: {
screen:ConnectionScreen} ,
Apropos : {
screen: AboutScreen
},
});
const screens = {
Accueil:{
screen : AppDrawerNavigator
},
SeConnecter: {
screen:AppDrawerNavigator
} ,
Apropos : {
screen: AppDrawerNavigator
},
}
const AppStackNavigator = createStackNavigator(screens,{
defaultNavigationOptions:{
headerTitle: () => <Header/>,
headerTintColor :'#fff',
headerStyle :{
backgroundColor:'#fff',
height: 100,
},
}
});
const AppNavigator= createAppContainer(AppStackNavigator);
What i see on my android device
enter image description here
<View style={{ flexDirection: "row", justifyContent: 'center' ,backgroundColor: 'red' ,width:360 }}>
///... 3 views and text in them
</View>
I did this, hard coded the width to main view of component using in place of title. about width 360 takes complete width having equal width on both left and right end.
Please do mention if you find a better way to sort the things. Thanks in advance.
I came across this problem today also, but after searching for solution for more than a hour, I finally get a way around it. The problem was that react native doesn't allow full access on the way the header component works anymore, you can only put the component that you want, but not override the header.
Therefore, to configure the stack header to your preference, you have to configure the header from the stack headerStyle property from the options prop.
For mine, I configure the background from the stack headerStyle property so as to fill the whole header,
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetails";
import Header from "../shared/header";
const Stack = createStackNavigator();
export default function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{
headerTitle: () => <Header />,
headerStyle: {
backgroundColor: "coral",
},
}}
/>
<Stack.Screen name="ReviewDetails" component={ReviewDetails} />
</Stack.Navigator>
);
}
Then I use the absolute position on the header component style to put it in the middle accordingly.
Note: percent are still not working for the absolute positioning, so you still have to use pixels.
import { StyleSheet, Text, View } from "react-native";
import { MaterialIcons } from "#expo/vector-icons";
const Header = () => {
return (
<View style={styles.cont}>
<MaterialIcons name="menu" size={30} />
<View>
<Text style={styles.text}>GameZone</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
cont: {
flex: 1,
position: "absolute",
left: 80,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
},
text: {
fontSize: 24,
fontFamily: "nunito-bold",
letterSpacing: 2,
},
});
export default Header;
Here is the preview from android mobile
preview of the code
Related
I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.
Also...NarScreen is the screen I'm trying to get to.
FILE 1: App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'
function HomeScreen({ navigation }) {
return(
<View style={styles.background}>
<View style={styles.logo}>
<Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
</View>
<View style={styles.buttons}>
<MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
<MainButton>Tripoli Test</MainButton>
</View>
</View>
);
}
function Nar({ navigation }) {
return(
<NarScreen />
)
}
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Nar" component={Nar} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
backgroundColor: '#00629B',
flex: 1,
},
buttons: {
marginTop: "20%",
marginLeft: 10,
},
image: {
width: '80%',
height: 300,
borderRadius: 20,
},
logo: {
borderRadius: 200,
marginTop: '30%',
alignItems: 'center'
},
});
export default App;
File 2: NarScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const NarScreen = props => {
return(
<View>
<Text>BigScreen!</Text>
</View>
)
}
export default NarScreen;
FILE 3: MainButton.js
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
const MainButton = props => {
return <TouchableOpacity>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
backgroundColor: "#FCD757",
paddingVertical: 30,
paddingHorizontal: 30,
height: 100,
width: 300,
marginTop: "10%",
borderRadius: 10,
marginLeft: '12%',
justifyContent: 'space-between',
},
buttonText: {
color: 'black',
fontSize: 26,
textAlign: 'center',
}
})
export default MainButton;
Inside your MainButton.js file, you are not handling onPress event. Add it to touchable opacity.
const MainButton = props => {
return <TouchableOpacity onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
I am new to React native and I have an issue with undefined props while using the StackNavigator component in React-Native.
I've spent some days looking an answer for my question, but didn't find a propper way to resolve an issue.
The issue is in passing props to child component, they are undefined, but, the tutorial i followed is not doing anything else except of these steps.
Here screens and code of my app
When hitting green button in my LoginScreen the expected result is navigation to my MainScreen, but the result is "props are undefined"
I would be very gratful if someone can help me to solve this problem and help me to figure out, where the problem is!
My code :
App.js file
import React from 'react';
import { StyleSheet, Text, View, StatusBar} from 'react-native';
import Login from './src/components/login/Login';
import {StackNavigator} from 'react-navigation';
import MainScreen from './src/components/main/MainScreen';
export default class App extends React.Component {
static navigationOptions = { title: 'Welcome', header: null };
render() {
return (
<AppNavigation />
);
}
}
const AppNavigation = StackNavigator({
LoginScreen : {screen : Login},
MainScreen : {screen : MainScreen},
})
const styles = StyleSheet.create({
container: {
backgroundColor: '#3498db',
alignItems: 'center',
justifyContent: 'center',
},
});
Login.js , this component describes my Login page. It also renders component LoginForm, where i'm describing InputText and TouchableOpacity where i have onPress method, which must navigate me to MainScreen
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image
} from 'react-native';
import LoginForm from './LoginForm'
export default class Login extends React.Component {
static navigationOptions = { title: 'Welcome', header: null };
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image
source = {require('../../../images/logo.png')}
style = {styles.logo}>
</Image>
<Text style = {styles.title}>Добро пожаловать!</Text>
<Text style = {styles.titleLower}>Введите код для авторизации</Text>
</View>
<View style = {styles.formContainer}>
<LoginForm/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor : '#3493db'
},
logoContainer : {
flexGrow : 1,
alignItems : 'center',
justifyContent : 'center'
},
logo : {
width : 120,
height : 120
},
title : {
color : '#fff',
marginBottom : 10,
fontSize : 22
},
titleLower : {
color : '#fff',
marginTop : 5,
fontSize : 12
}
});
LoginForm.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
StatusBar
} from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView
behavior="padding"
style={styles.container}>
<TextInput
placeholder = "ваш пароль"
placeholderTextColor = '#fff'
underlineColorAndroid = {'transparent'}
style = {styles.input}
secureTextEntry>
</TextInput>
<TouchableOpacity
style= {styles.buttonContainer}
onPress = {() =>
this
.props
.navigation
.navigate('MainScreen')}>
<Text style= {styles.buttonText}>Войти</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20,
},
input : {
backgroundColor : 'rgba(255, 255, 255, 0.2)',
height : 40,
marginBottom : 10,
color : '#FFF',
fontSize : 16
},
buttonContainer : {
backgroundColor : '#00B241',
paddingVertical : 10,
alignItems: 'center',
justifyContent: 'center',
marginBottom : 30
},
buttonText : {
textAlign : 'center',
color : '#fff'
}
});
I believe the issue is that LoginForm.js is nested inside of login.js.
So, when you call this.props.navigation.navigate('MainScreen'), loginForm.js has no idea what navigation is, because it belongs to Login.js.
I believe passing the navigation object to loginForm.js from login.js will solve this issue:
<LoginForm screenProps={{ navigation: this.props.navigation }} />
Pass navigation props to loginForm. It works for me
<LoginForm navigation={this.props.navigation} />
I have been trying to implement react-navigation to my project to very little success.
Every time i import a screen to the navigator it comes up as "undefined".
I have tried loading just the screen to the top level and it seems to work but when i put it inside the navigation it returns to being undefined.
Heres my code:
index.js:
import React, { Component } from 'react';
import Root from './navigator/router';
//import Home from './screens/Home';
export class App extends Component {
render() {
return <Root />;
}
}
Home.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Slider,
Image,
ListView,
ScrollView,
TouchableOpacity
} from 'react-native';
import HeatingSliderComponent from '../components/HeatingSliderComponent';
export default class Home extends Component {
_onPressDial = () => {
this.props.navigation.navigate('DialScreen');
};
render() {
return (
<View style={styles.container}>
{/* Navigation bar */}
<View style={styles.navBarOuter}>
<View style={styles.navBarInner}>
{/* item 1 */}
<TouchableOpacity flex = {1}>
<Image
//style={styles.button}
source={require('../../images/menu_logout.png')}
/>
</TouchableOpacity>
{/* item 2 */}
<Image
flex = {3}
style = {{resizeMode: 'contain'}}
source={require('../../images/background_text.png')}
/>
{/* item 3 */}
<TouchableOpacity flex = {1}>
<Image
//style={styles.button}
source={require('../../images/menu_about.png')}
/>
</TouchableOpacity>
</View>
</View>
<View style = {styles.oneFlexGap}/>
{/* Main Dial Button */}
<View style={styles.dialButton}>
<TouchableOpacity onPress={this._onPressDial}>
<Image
//figure out how to make this work and maybe look into making a custom wheel of some kind.
//probably by writing in native android
style={styles.button}
source={require('../../images/menu_edit_4.png')}
/>
</TouchableOpacity>
</View>
{/*<View style = {styles.oneFlexGap}/>*/}
{/* Vertical Slider */}
{/*<View style = {styles.vertSliderContainer}>
<HeatingSliderComponent
step={1}
minimumValue={0}
maximumValue={100}
value={0}
/>
</View>*/}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
navBarInner: {
flex: 1,
flexDirection: 'row',
height: '5%',
width: '100%',
alignItems: 'center',
},
navBarOuter: {
flex: 2,
alignItems: 'center',
},
vertSliderContainer: {
flex: 2,
alignItems: 'center',
},
dialButton: {
flex: 2,
alignItems: 'center',
},
button: {
flex: 1
},
oneFlexGap: {
flex: 1
},
});
AppRegistry.registerComponent('Home', () => Home);
router.js:
import React from 'react';
import { StackNavigator } from 'react-navigation';
import DialScreen from '../screens/DialScreen';
import Home from '../screens/Home';
export const Root = StackNavigator({
HomeScreen: {
screen: Home,
},
DialScreen: {
screen: DialScreen,
navigationOptions: {
title: 'DialScreen',
},
},
});
I have tried a multitude of things to try and get it to work including making the project again in a new location.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
UPDATE: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I am still facing these errors but now i am facing the error "Route 'HomeScreen' should declare a screen error.
With my last change i did this to the router.js
// import DialScreen from '../screens/DialScreen';
// import Home from '../screens/Home';
var DialScreen = require('../screens/DialScreen');
var Home = require('../screens/Home');
and then structured the objects like this
DialScreen: {
screen: DialScreen.DialScreen,
navigationOptions: {
title: 'DialScreen',
},
from these changes i seem to get this error instead.
Route 'DialScreen' should declare a screen. For example:
import MyScreen from './MyScreen';
...
DialScreen: {
screen: MyScreen,
}
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:22:6
validateRouteConfigMap
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:18:21
default
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\StackRouter.js:36:25
default
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\navigators\StackNavigator.js:44:29
loadModuleImplementation
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:174:12
guardedLoadModule
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:119:45
_require
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:110:24
_accept
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:274:12
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:121:27
onmessage
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:101:26
dispatchEvent
C:\Users\Dell\Documents\DSMReact\node_modules\event-target-shim\lib\event-target.js:172:43
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\WebSocket\WebSocket.js:148:27
emit
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\EventEmitter\EventEmitter.js:182:12
__callFunction
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:245:47
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:101:26
__guard
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:213:6
callFunctionReturnFlushedQueue
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:100:17
error message
Change from this in the index.js file
import Root from './navigator/router';
to
import { Root } from './navigator/router';
and this is because you are doing a named export on the Root StackNavigator.
------------------------------ OR -------------------------------
Instead of the previous solution, you change the export of the Root in the router.js file to a default export like so
const Root = StackNavigator({...});
at the bottom, you place the default export statement
export default Root;
Cheers!
I can't see why the placeholder won't show up on both of the <TextInput>'s. Also, when the user types something, nothing shows up in those <TextInput> boxes. I would like to know why this is happening.
Here is App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here is Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity} from 'react-native';
class Login extends Component {
render() {
return(
<View>
<TextInput
placeholder={"Email"}
placeholderTextColor={"#E365F4"}
style={styles.input}
/>
<TextInput
placeholder={"Password"}
placeholderTextColor={"#f44242"}
style={styles.input}
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
backgroundColor: 'green',
paddingBottom: 20,
padding: 20,
paddingHorizontal: 150,
marginBottom: 10
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps'
}
});
export default Login;
Here is BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';
export default class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
resizeMode: 'cover'
// resizeMode: 'contain' // Shows image completely.
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
}
});`
Three issues here and it's all dealing with your styling.
By using paddingBottom: 20 and padding: 20, you are effectively reducing what can be shown in the TextInput into a sliver (if even that). To compensate for that, you need to adjust the height as well.
When you do adjust height, you may run into this double height issue. I don't know if that has since been fixed, but take a look at it if you are still seeing issues.
Lastly, paddingHorizontal: 150 pushes it too far horizontally making nothing appear. Reduce that to something much smaller like paddingHorizontal: 15.
I am fetching data through an async request. I know that I need to wait for the api request to complete before displaying the data. Unfortunately, I'm not sure how to create a loader to wait for the data to load.I am new to react, so if I could also get help with implementing it as well, that would be fantastic! Here is my current code:
import React, { Component, PropTypes } from 'react';
import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react- native';
import Header from '../Components/Header';
import Api from '../Utility/Api';
export default class CalendarPage extends Component {
constructor(props) {
super(props);
}
async componentWillMount() { this.setState(
{data: await Api.getDates()},
)
}
render() {
return (
<View style={{flex: 1}}>
<Header pageName="Calendar" navigator={this.props.navigator}/>
<View style = {{flex:9}}>
<View>
{ this.state.data.days[0].items.map((item) => (
<View>
<Text>{item.summary}</Text>
<Text>{item.start.dateTime}</Text>
<Text>{item.description}</Text>
</View>
))}
</View>
</View>
</View>
);
}
}
A simple example using ActivityIndicator -
import ActivityIndicator
import { View, Text, ListView, StyleSheet, TouchableHighlight, ActivityIndicator} from 'react- native';
set data state to null
constructor(props) {
super(props);
this.state = {
data: null
}
}
do conditional rendering
render() {
if (!this.state.data) {
return (
<ActivityIndicator
animating={true}
style={styles.indicator}
size="large"
/>
);
}
return (
<View style={{flex: 1}}>
<Header pageName="Calendar" navigator={this.props.navigator}/>
....
....
</View>
);
}
}
indicator style
const styles = StyleSheet.create({
indicator: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: 80
}
});
Although solution proposed by #vinayr works fine but user will still be able to click on screen and perform some action even while loader is being shown which can lead to crash.
One solution is wrap loader inside a Modal.
import React, { Component } from 'react';
import {
StyleSheet,
View,
Modal,
ActivityIndicator,
} from 'react-native';
const styles = StyleSheet.create({
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: '#00000040',
},
activityIndicatorHolder: {
backgroundColor: '#FFFFFF',
height: 100,
width: 100,
borderRadius: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
},
});
const SmartLoader = (props) => {
const {
isLoading,
...attributes
} = props;
return (
<Modal
transparent
animationType={'none'}
visible={isLoading}
onRequestClose={() => { console.log('Noop'); }}
>
<View style={styles.modalBackground}>
<View style={styles.activityIndicatorHolder}>
<ActivityIndicator
animating={isLoading}
size="large"
/>
</View>
</View>
</Modal>
);
};
export default SmartLoader;
After that you can use it anywhere in your component, user will not be able to perform any action till loader is finished ( made hidden based on flag)