I was used to getParam in Navigation 4 to pass values between screens, now I'm a bit lost in version 5. I made an Expo Snack to better understand the problem I'm having: https://snack.expo.io/#mobshed/navigation-5---passing-values
In case the snack is not clear, I would like to pass the topic's value from Screen1 to Screen2.
the issue is because route param in not embedded in curly braces.
I tried using this
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
AsyncStorage,
Dimensions,
FlatList,
TouchableOpacity,
ScrollView,
Alert,
RefreshControl,
Animated,
Easing,
Image,
Button
} from "react-native";
import MyScreen1 from "./App.js";
import { createStackNavigator } from "#react-navigation/stack";
const Stack = createStackNavigator();
function MyScreen2({route}) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
<Text>itemId: {route.params?.topic ?? "defaultValue"}</Text>
</View>
);
}
export default MyScreen2;
and it worked
The #Saurav answer is correct. Still, I would like to add to it. I may suggest rewriting MyScreen2 as:
export default MyScreen2 = ({route}) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
<Text>itemId: {route.params?.topic ?? "defaultValue"}</Text>
</View>
);
}
What happens here:
a "map" of {navigation:{}, route:{…}} gets passed to MyScreen2 as a parameter;
{route} is a syntax for destructuring the map from [1];
Then you can access topic using the expression from the question.
So if you need to add some navigation logic onto MyScreen2 in the future, you may destructure navigation as well.
Related
import statements
import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
main app function
export default function App() {
const renderContent = () => (
<View
style={{ backgroundColor: 'white', padding: 16, height: 450, }} >
<Text>Swipe down to close</Text>
</View>
const sheetRef = React.useRef(null);
const fall = new Animated.Value(1)
return (
<>
<View
style={{
flex: 1,
backgroundColor: 'papayawhip', alignItems: 'center', justifyContent: 'center',
}}
>
<Button title="Open Bottom Sheet" onPress={() => sheetRef.current.snapTo(0)} />
</View>
continue with bottom sheet code
<BottomSheet
ref={sheetRef}
snapPoints={[200, 0]}
initialSnap={1} borderRadius={20}
renderContent={renderContent}
callbackNode={fall}
enabledGestureInteraction={true}
/>
</>
)
}
I have set enabledGestureInteraction to true but still it is not working
I haven't used reanimated-bottom-sheet before. But looks like there is a problem with snapPoints property. It should be:
snapPoints={[0, 200]}
The package is out of date. I suggest you use this one instead: https://gorhom.github.io/react-native-bottom-sheet/
I'm using it in my project. It's awesome.
The solution I found for this is we have to wrap our components inside GestureHandlerRootView compnent from react-native-gesture-handler and we have to set it's style with flex:1
discussion ref link - https://github.com/gorhom/react-native-bottom-sheet/issues/775
i am new to react i m trying to make the background color of my main container cover all the screen but when i use flex 1 everything seems to disappear i've seen many people doing it and it turned fine i can't understand the problem since i m using it on my container .
import React from 'react';
import mainstyles from '../styles/mainstyles';
import {
Button,
Text,
View,
AlertButton,
TouchableOpacity,
} from 'react-native';
const UploadFile = ()=>{
return (
<View style={mainstyles.container}>
<Text style={mainstyles.title}>Ocr Scan</Text>
<Text style={mainstyles.par}>Import a file and start digitizing</Text>
<Button
title="Take picture"
/>
<Button
title="Upload file"
/>
</View>
);
};
export default UploadFile;
import {StyleSheet} from 'react-native'
const mainstyles=StyleSheet.create({
container:{
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
When you use flex on a component A, every component B that nest component A need to use flex.
I am trying to randomly display images from a local file that have been stored in an array in a Card component which is then rendered in the App, the root of the application.
Here is the Images file containing an array of images in the same directory.
const woolyImages = [
require('images/wooly1'),
require('images/wooly2'),
require('images/wooly3'),
require('images/wooly4'),
require('images/wooly5'),
];
export default woolyImages;
Here is the Card component where I attempt to pick a random image from the array and display it using the Image component via 'source'.
import React from 'react';
import {Image, View, StyleSheet} from 'react-native';
import woolyImages from '../images/Images';
function Card() {
const randomImage =
woolyImages[Math.floor(Math.random() * woolyImages.length)];
console.log(randomImage);
return (
<View style={styles.cardContainer}>
<Image source={randomImage} />
</View>
);
}
const styles = StyleSheet.create({
cardContainer: {
width: '50%',
height: '35%',
backgroundColor: 'pink',
},
});
export default Card;
(I inserted the pink background so I could be sure it was rendering in the view. It is.)
Finally, here is the root of the application where I render the card.
import React from 'react';
import {View, StyleSheet} from 'react-native';
import Header from './components/Header';
import Card from './components/Card';
import GenerateWoolyButton from './components/GenerateWoolyButton';
function App() {
return (
<View style={styles.container}>
<Header />
<Card />
<GenerateWoolyButton style={styles.button} />
</View>
);
}
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-start',
alignItems: 'center',
flex: 1,
},
});
export default App;
I am getting the below error.
Can anyone please tell me how to display a randomly generated picture in the Card component and display it in the root of my application? Thank you.
You need to add width & height styles to Image of your Card Component. Such as,
<Image source={randomImage} style={{height: 200, width: 200}} />
Hope this will helps you. Feel free for doubts.
I'm currently working on an React Native project. I need to implement a feature similar to "Swipe Down To close Modal" on Instagram
I believe that you're using #react-native-community/react-native-modal package. In the library documents, you can see that there is a property called swipeDirection which is either a string or an array that can be one or many of the following options; 'up', 'down', 'left' or 'right.
You can also set the threshold required swipe action to be completed by using swipeThreshold property. The default is 100 according to the library documents.
Here's an example of the modal;
import React from 'react';
import {View, Text} from 'react-native;
import Modal from 'react-native-modal';
const ModalComponent = props => {
const [isVisible, setIsVisible] = useState(true);
return (
<Modal isVisible={isVisible}
swipeDirection="down"
//swipeDirection={["up", "down", "left", "right"]}
onSwipeComplete={(e) => { setIsVisible(false); })
style={{ justifyContent: 'flex-end', margin: 0, }} >
<View style={{ backgroundColor: 'steelblue' }}>
<Text>Hello Modal</Text>
</View>
</Modal>
);
};
export {ModalComponent};
If I understand correctly -- making the outermost container as "flex: 1" should let the component span the whole screen.
However, the code I wrote is not working properly.
import React from 'react';
import { View, Text } from 'react-native';
export default function test() {
return (
<View style={{ flex: 1, borderColor: 'red', borderWidth: 5 }}>
<Text>test</Text>
</View>
);
}
The simulator screenshot is here
Can anyone please point out where I did wrong?
Thank a lot!
Where are you calling this component? Yes, the flex will expand, but it is dependent on that parent component container. It looks like your parent is the one restricting this component.
Ensure the parent is also flexing and filling the content. Here is some more details around flex layout: https://facebook.github.io/react-native/docs/flexbox
Change your code to import the Component as a class:
import React from 'react';
import { View, Text } from 'react-native';
export default test extends React.Component {
render() {
return (
<View style={{ flex: 1, borderColor: 'red', borderWidth: 5 }}>
<Text>test</Text>
</View>
);
}
}