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.
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 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 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.
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>
);
}
}
using the snack below:
https://snack.expo.io/ry_5rCk84
I am trying to display the icon 'wifi_off' using Material Icons in my react native app (just shared this as a snack on expo for easier sharing) but this is not a recognised value for prop 'name'.
and ends up displaying a '?' for unknown icon.
I am able to use wifi-off icon using 'material-community' icon set
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
<Icon name='wifi' size={50} type='material'/>
<Icon name='wifi-off' size={50} type='material-community' />
<Icon name='wifi_off' size={50} type='material' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
react-native-elements uses react-native-vector-icons to display the icons.
react-native-vector-icons has a directory where you can check which icons are available, you can look them up by name. https://oblador.github.io/react-native-vector-icons/
If you search for all the icons that have wifi in their name you find the following result for MaterialIcons and MaterialCommunityIcons
If you search for wifi_off you will find that there are no results.
Therefore wifi_off is not available to use.
It is also worth noting that react-native-elements currently doesn't support the latest version of react-native-vector-icons, you can see that in this currently open issue.
When you are using react native elements Icon, behind the scenes it is searching in a list https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json, here you can find the names of the Icons that are supported and as you can see "wifi_off" is not here, maybe you can try "signal-wifi-off".