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>
);
}
}
Related
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 am trying to use react-native-snap-carousel but however, the swiping effect is not working as expected - it is often difficult to swipe left and right, it requires user to swipe harder to move to another picture (as illustrated in the link below).
Swiping issue with React Native Snap Carousel
I am not able to find any documented soluton but I found one possible prop - swipeThreshold. I try various value, but still the issue persist.
Does anyone know the solution to this?
I suggest you to use react-native-image-slider.
it's flexible and easy to use.
https://www.npmjs.com/package/react-native-image-slider
I made a component named slider.js:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Image,
} from 'react-native';
import ImageSlider from 'react-native-image-slider';
export default class Slider extends Component {
render() {
return (
<ImageSlider
loop
autoPlayWithInterval={3000}
images={this.props.dataSource}
customSlide={({ index, item, style, width }) => (
<View key={index} style={[style, styles.customSlide]}>
<Image source={{ uri: item }} style={styles.customImage} />
</View>
)}
/>
);
}
}
const styles = StyleSheet.create({
customImage: {
height: 180,
marginRight: 20,
marginLeft: 20,
borderWidth: 1,
borderRadius: 10,
marginTop: 8,
},
customSlide: {
backgroundColor: '#eee',
},
});
you can add this to your project and use it wherever you need it like this:
import Slider from '../component/slider';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
images: [
'https://placeimg.com/640/480/nature',
'https://placeimg.com/640/480/tech',
'https://placeimg.com/640/480/animals',
'https://placeimg.com/640/480/tech',
],
}
render() {
return (
<View style={{flex: 1, backgroundColor: '#eee'}}>
<Slider dataSource={this.state.images} />
</View>
);
}
}
I have the following React-Native code which alerts the user that it was pressed, however it does not respond to anything.
I have tried using different Touchable components but none seem to work, the only one is Button but that's not really what I want, I'm building a slider so a button is not really appropriate for this.
Anyway, here's my code:
import React, {Component} from 'react';
import {View, TouchableWithoutFeedback, Alert, Text} from 'react-native';
import styles from './styles.js';
import LinearGradient from 'react-native-linear-gradient';
export default class BrightnessSlider extends Component {
value: 100;
constructor(...args) {
super(...args);
}
render() {
return (
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={["#222", "#ddd"]} style={styles.brightnessSliderRunnable}>
<View style={styles.brightnessSliderTrack}>
<TouchableWithoutFeedback onPress={() => Alert.alert("Hello World")}>
<View style={styles.brightnessSliderThumb} />
</TouchableWithoutFeedback>
</View>
</LinearGradient>
)
}
}
and ./styles.js
import {StyleSheet} from "react-native";
export default styles = StyleSheet.create({
brightnessSliderRunnable: {
top: 50,
height: 9,
width: width - 20,
left: 10,
backgroundColor: "#555",
opacity: 1,
elevation: 1,
borderWidth: 0
// position: "absolute"
},
brightnessSliderThumb: {
width: 23,
height: 23,
borderColor: "#888",
// opacity: 1,
borderWidth: 2,
backgroundColor: "#ffffff",
position: "absolute",
top: -7,
borderRadius: 5,
elevation: 2
},
brightnessSliderTrack: {
width: "100%",
elevation: 1,
borderWidth: 0
}
});
Thanks for any help
Questioner's original code.
Solution
Added by questioner's solution.
Change position: absolute to position: relative.
Change your style type made by StyleSheet as below.
Your original.
{...styles.colourContainer, opacity: 100 - this.darkness}
Recommend way.
[styles.colourContainer, {opacity: 100 - this.darkness}]
I tested code and it works well when we touch the white square.
Tested on iOS.
Original App.js.
App.js changed by me.
import React, {Component} from 'react';
import {View, Dimensions, Text} from 'react-native';
import BrightnessSlider from '../components/BrightnessSlider';
import styles from '../components/TempStyle.js';
const d = Dimensions.get('window'),
width = d.width,
height = d.height;
export default class BrightnessSliderTest extends Component {
constructor(...args) {
super(...args);
this.darkness = 0;
this.prevColours = ["#ff0000", "#00ff00", "#0000ff"];
}
render() {
// It is not possible just access the style created by StyleSheet.create(). Do not use StyleSheet.create() or change to flatten the StyleSheet object.
const sty = [styles.colourContainer,{ opacity: 100 - this.darkness}];
return (
<View style={styles.container}>
<View style={sty}>
<View style={styles.toolBar}>
<View style={styles.colourPalette}>
{this.prevColours.map((i, a) => <View key={String(a)} style={[styles.colourTile, {backgroundColor: i}]}/>)}
</View>
{/* <Button title={"Save To Palette"} onTap={this.saveToPalette}>Save</Button> */}
</View>
<BrightnessSlider />
</View>
</View>
);
}
}
Why?
I am not sure how you can use your component in other components. But if you do not have container having enough size can show your component, touch area may not work. That is why I use backgroundColor for container sometimes in testing.
Added after testing full code used in question.
It is not possible just access the style through like spread operator created by StyleSheet.create(). Do not use StyleSheet.create() or change to flatten the StyleSheet object.
And Style can be worked differently from platforms(iOS, Android).
I've been trying to render a background image, and it runs, but nothing appears. I'm running this through Android on Windows. This is the code below:
import React, { Component } from 'react';
import { View, Image, Text, ImageBackground } from 'react-native';
class Background extends Component {
render() {
return (
<ImageBackground
source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
style={{flex: 1, width: '100%'}}
>
<View >
<Text>Test</Text>
</View>
</ImageBackground>
);
}
}
export default Background;
I'm not sure if the code just isn't properly pulling the image itself or if the styling needs to be adjusted. Thanks for the help!
Your ImageBackground component needs a height value in your style attribute. RN is picky about that.
import { ImageBackground } from 'react-native'
<ImageBackground
source={require('../assets/background.jpg')}
resizeMode={'cover'}
style={{ flex: 1, width: '100%' }}></ImageBackground>
Wrap your ImageBackground component within a Container component.
class Background extends Component {
render() {
return (
<Container>
<ImageBackground
source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
style={{flex: 1, width: '100%'}}>
<View >
<Text>Test</Text>
</View>
</ImageBackground>
</Container>
);
}
}
for me only shows when i use
require()
like this post
ImageBackground not working when i call source from state
source={require( 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg')}
(i tried to import image and call inside source but don't appears, even declaring in style height and width, only after use require(), why? i don't know)