I'm stuck with element sizes based on screen sizes when device orientation changes.
Here's my code
import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
const CleanSearchBar = (props) => {
const windowWidth = useWindowDimensions().width;
return (
<View>
<TouchableOpacity style={{left: (windowWidth - 127)}}>
<Text>text</Text>
</TouchableOpacity>
</View>);
}
It always keeps the initial value.
Any help on this? Thanks
Related
I am using Navigate to go to another page on React Native, I've tried with navigation & react Dom. I want to go to Home.js. I've tried using NavigationContainer, & reateStackNavigator and also React Dom.
I can't seem to find a solution to either of the two and the YouTube videos aren't really helping.
import {
StyleSheet,
Text,
SafeAreaView,
Image,
View,
TouchableOpacity,
} from 'react-native';
import React,{ useState} from 'react';
import {Card} from 'react-native-shadow-cards';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {Route, BrowserRouter as Router, Switch, Link, Navigate, NavigationType} from 'react-router-dom';
export default function App() {
const handlePress = () => navigation.navigate('Home');
const [name,setName] = useState("");
const shadowstyle={
shadowOpacity:1
};
return (
<SafeAreaView style={styles.container}>
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
<Text style={styles.titleText} onPress={handlePress}>GTipz </Text>
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/GtipzLogo.png")} />
<View>
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
</View>
<TouchableOpacity onPress={handlePress}>
<View style ={[styles.buttonContainer, styles.userImageWrapper]}>
<Text style={styles.buttonText}>Login</Text>
</View>
You need to import the useNavigation hook from react-navigation.
import { useNavigation } from '#react-navigation/native'
const navigation = useNavigation()
I also suggest you replace Text with TouchableOpacity where you call the handlePress function
Please refer to this doc for more information.
I have a header where is a input field. Is that possible to pass the value to my screen file ?
Header.js
import React, { useCallback } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Platform, TextInput } from 'react-native';
import { useNavigation } from '#react-navigation/native';
import { Feather, AntDesign } from '#expo/vector-icons';
import Constants from 'expo-constants';
const width = Dimensions.get('window').width;
const headerHeight = 50;
const headerMessages = (text) => {
const navigation = useNavigation();
const [search, setSearch] = React.useState('');
const handleChangeInput = React.useCallback((e) => text(e));
const handleGoBack = useCallback(() => {
navigation.goBack();
});
return (
<View style={styles.container}>
<View style={styles.topHeader}>
<StatusBar color="#333" />
<Text style={styles.headerTitle}>Messages (0)</Text>
</View>
<View style={styles.searchContainer}>
<TextInput value={search} style={styles.searchInput} onChangeText={handleChangeInput} placeholder='Search Field' />
</View>
</View>
)
};
})
export default headerMessages;
Message.js
import * as React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
const Messages = (props) => {
console.log(props.text);
return (
<View style={s.container}>
<Text>Messages</Text>
</View>
)
};
............................................................................................................................................................
If you want the 'search' state value in Message.js file, in that case initialize search in Message.js file and pass the setSearch hook as a callback function in the Header.js file.
And in the Header.js, get the state as props and set the value in textinput. In this way you will get the search value in the message.js file.
I am using react-navigation to add custom header to my app. I am facing the same issue that is shown in the left image where the phone header overlaps with app's header. I tried to add SafeAreaView around my screen. But, it didn't make solve the problem.
it has two solutions. you can use
import React from 'react'
import {View,SafeAreaView, Text} from 'react-native'
const ConvertingFileScreen = () => {
return(
<SafeAreaView>
<Text>ConvertingFileScreen</Text>
</SafeAreaView>
)
}
export default ConvertingFileScreen;
or simply with giving a marginTop of StatusBar.height like this.
import React from 'react'
import {View,SafeAreaView,StatusBar, Text,} from 'react-native'
const ConvertingFileScreen = () => {
return(
<View style={{marginTop:StatusBar.currentHeight}}>
<Text>ConvertingFileScreen</Text>
</View>
)
}
export default ConvertingFileScreen;
You can use SafeAreaView or you can add some top spaces using useSafeAreaInsets from 'react-native-safe-area-context' It will solve the issue.
import React from 'react';
import { View,Text } from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
const ConvertingFileScreen = () => {
const { top } = useSafeAreaInsets();
return (
<View style={{marginTop: top}}>
<Text>HI React Native</Text>
</View>
)
}
Check for more details
I want to pass parameters to a view. I followed some examples, but to no avail. How do I do it?
A part of my code:
Home:
import React from 'react';
import { MaterialIcons } from '#expo/vector-icons';
import { useNavigation } from '#react-navigation/native';
import { View, Text, Image, StyleSheet, ScrollView } from 'react-native';
import colors from '../../components/colors';
import Shoe from '../../components/home/shoe';
import Teste from '../teste';
import Detail from '../detail';
export default function Home(props) {
return(
<View style={styles.storeProducts_line}>
<Shoe
source={require('../../images/home/tenisAdidasFalconFeminino.jpg')}
title="Tênis Adidas Falcon Feminino"
price="200,00"
onClick={() => props.navigation.navigate('Detail', {
productId: 12,
productTitle: 'Tênis Adidas',
})}
/>
<Shoe
source={require('../../images/home/tenisAdidasYeezySalt.jpg')}
title="Tênis Adidas Yeezy Salt"
price="175,90"
onClick={() => navigation.navigate('Detail')}
/>
</View>
);
}
Detail:
import React from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
export default function Detail({props, navigation}) {
const productId = navigation.getParam('userId');
// const productId = props.navigation.getParam('userId');
return(
<View style={styles.container}>
<Image
/>
<Text>
Detail
</Text>
<Text>
{productId}
</Text>
</View>
);
}
All the examples I saw the structure of the view is different, do I have to change the structure to work? I'm new to react-native, bear with me. Thanks in advance for your attention.
You can also use route to access the passed data from parent component.
Example:
import React from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
export default function Detail({route, navigation}) {
const {productId} = route.params;
// const productId = props.navigation.getParam('userId');
return(
<View style={styles.container}>
<Image
/>
<Text>
Detail
</Text>
<Text>
{productId}
</Text>
</View>
);
}
For more please do read this doc: Passing parameters to routes
I am trying to make a back button in react native and using navigation.goBack() in the function component but if I console the navigation then it's giving me undefined
import React from 'react';
import {
Text,
StyleSheet,
Image,
View,
Dimensions,
TouchableOpacity,
} from 'react-native';
import backIcon from '../assets/back-black.png';
const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
const TitleHeader = ({navigation, title}) => {
// console.log("hello");
return (
<View style={[styles.customHeader]}>
<View style={[styles.headerLeft]}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image source={backIcon} style={styles.headerIcon} />
</TouchableOpacity>
<Text style={[styles.font, styles.headerTitle]}>{title}</Text>
</View>
</View>
);
};
The rest of the code is working fine I am just getting an error in navigation so I add the important code only
React-navigation v5 provides hook useNavigation() returns the navigation prop of the screen it's inside.
Sample:
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '#react-navigation/native';
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
In your code you need pass prop navigation to your component