import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ScrollView } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.top} />
<View style={styles.contentContainer}>
<View style={styles.content}>
<Text>Item1</Text>
</View>
<View style={styles.content}>
<Text>Item2</Text>
</View>
<View style={styles.content}>
<Text>Item3</Text>
</View>
</View>
</ScrollView>
<View style={[styles.tabbar]} />
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
},
top: {
height: 346,
backgroundColor: '#0066cc',
},
contentContainer: {
flex: 1,
justifyContent: 'space-around',
},
content: {
padding: 20,
borderWidth: 1,
borderColor: 'red',
},
tabbar: {
height: 50,
backgroundColor: '#eee',
},
});
Please see attached screenshot for my issue. I'm providing a Snack link with all the code.
Note that when I remove ScrollView the items align as I need them to be but removing ScrollView is not an option.
https://snack.expo.io/SJQnkXGS7
Either give the ScrollView or the contentContainer a predefined height:
<ScrollView contentContainerStyle={styles.container}>
or
<View style={[styles.contentContainer, {height: Dimensions.get('window').height - 396}]}>
Related
I have a row with two-column and want to put an image in one of the columns with full size.
import React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { View, ImageBackground, Image, StyleSheet } from 'react-native';
import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
import { Input, InputProps } from 'react-native-ui-kitten';
import { Text, Button } from 'react-native-ui-kitten';
const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<View style={styles.box}>
<View style={{width: '50%', backgroundColor: 'powderblue'}}>
<Image
resizeMode="contain"
source={require('../ProjectName/assets/image.jpg')}
style={styles.canvas} />
</View>
<View style={{width: '50%', backgroundColor: 'skyblue'}}>
<Input />
<Button />
</View>
</View>
</ApplicationProvider>
);
const styles = StyleSheet.create({
box: {
flex: 1,
flexDirection: 'row',
width: 'auto',
maxHeight: 200,
backgroundColor: 'red',
},
canvas: {
width: '100%',
},
});
export default App;
Structure:
ApplicationProvider
View
View
Image
View
Input
Button
My image is out of the column and box
!
Please guide me to fix it.
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Image,
Text,
View,
ImageBackground
} from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'black'}}>
<View style={{flex: 1/3, height: 100, flexDirection: 'row', backgroundColor: 'red'}}>
<View style={{flex: 1/2, backgroundColor: 'yellow'}}>
<Image style={{flex: 1, width: '100%', height: 'auto'}} source={require('./assets/image.png')}/>
</View>
<View style={{flex: 1/2, backgroundColor: 'pink'}}>
</View>
</View>
</View>
);
}
}
I am new at developing React Native application. I want to align multiple(maybe three) React Native Element 'Tile' in a single row, something like 2X3 matrix style. I am trying to use flexbox but is not able to achieve the result.
Here's my code:
import React, { Component } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import { Tile } from 'react-native-elements';
export default class Tel extends Component {
render() {
return (
<View style={styles.tileStyle}>
<View style={{width: 20, height: 20,}}>
<Tile
featured
caption="Text"
/>
</View>
<View style={{width: 20, height: 20,}}>
<Tile
featured
caption="Some Caption Text"
/>
</View>
<View style={{width: 20, height: 20,}}>
<Tile
featured
caption="Some"
/>
</View>
<View style={{width: 20, height: 20,}}>
<Tile
featured
caption="Text"
/>
</View>
<View style={{width: 20, height: 20,}}>
<Tile
featured
caption="Some Caption Text"
/>
</View>
<View style={{width: 20, height: 20,}}>
<Tile
featured
caption="Some"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
tileStyle: {
flex: 1,
flexDirection: 'row',
// alignItems: 'center',
// justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
}
});
All I can get three tiles in column wise and no width or height of them.
Please help out with the solution.
Use flex-wrap. Get width of the window in the constructor and use it in width prop of the Tile to get the proportional width you want.
import {
View,
Dimensions,
StyleSheet
} from "react-native";
import { Tile } from 'react-native-elements';
export class Screen extends Component {
constructor() {
super()
this.state = {
width: Dimensions.get('window').width
}
}
render() {
const { width } = this.state;
return (
<View style={{
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
backgroundColor: '#ecf0f1'
}}>
<Tile
width={width/3}
featured
caption="1"
/>
<Tile
width={width/3}
featured
caption="2"
/>
<Tile
width={width/3}
featured
caption="3"
/>
<Tile
width={width/3}
featured
caption="4"
/>
</View>
);
}
}
this is my genymotion screen !!!!
this is my code . Just react-native program And the trouble in my photo.Android is Not , IOS is great .how hack in android to make it right .
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class TestScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text></Text>
<View style={styles.parent}>
<View style={styles.children}>
<Text>my content </Text>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
},
parent: {
width:300,
height: 40,
backgroundColor: 'yellow',
alignItems:'center',
position:'absolute',
},
children:{
height:20,
justifyContent: 'center',
top:-10
}
})
How should I Fix it
Overflow is not supported on Android: https://github.com/facebook/react-native/issues/6802
You can try this library:
https://github.com/entria/react-native-view-overflow
Or you could try to do some sort of absolute positioning with your view, but it might not be perfect. The below example puts all of the views in one parent, and then offsets the text to overlap both with an absolute position.
render() {
return (
<View style={styles.container}>
<View style={{ height: 40}}/>
<View style={{ height: 40, backgroundColor: "yellow"}}/>
<View style={{ position: "absolute", top: 30}}>
<Text>my content </Text>
</View>
</View>
)
}
I use react-native-swiper and i want to add a text above my image.
I try to set style container image paragraph, it is still not working.
What should i do about the style setting ?
Any help would be appreciated. Thanks in advance.
import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
const dimensions = Dimensions.get('window').width;
class About extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Swiper
style={styles.wrapper}
height={200}
paginationStyle={{bottom: 10}}
>
<View style={styles.container}>
<Image style={styles.image} source={require('../img/home_service_bg1.jpg')} />
<Text style={styles.paragraph}>How to let me show above the img.</Text>
</View>
<View style={{ flex: 1 }}>
<Image source={require('../img/home_service_bg2.jpg')} style={styles.img}/>
</View>
</Swiper>
<View style={{ flex: 2 }}>
<Text>Hi</Text>
</View>
</View>
);
}
}
const styles = {
wrapper: {
},
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
image: {
flexGrow:1,
height:null,
width:null,
alignItems: 'center',
justifyContent:'center',
},
paragraph: {
textAlign: 'center',
},
};
export default About;
Here is my situation now:
I hope it becomes like this:
position="absolute" will make it work as Android RelativeLayout.
If you want set view on top set marginTop to 0.
After seeing your requirement. You can simply use ImageBackground
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
See facebook docs
Using react-native. How to make text show inside (and not bellow) the background image?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import { Navigator } from 'react-native-deprecated-custom-components';
export default class Test extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={require('../img/example.jpg')}
style={styles.backgroundImage}
blurRadius={1} />
<View style={styles.content}>
<Text style={styles.logo}> Example Text </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
backgroundImage: {
flex: 1,
alignSelf: 'stretch',
width: null,
justifyContent: 'center',
},
content: {
alignItems: 'center',
},
logo: {
color: 'white',
fontSize: 40,
fontStyle: 'italic',
fontWeight: 'bold',
textShadowColor: '#252525',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 15,
marginBottom: 20,
}
});
As you can see, in the example above, the Text appears outside the backgroundimage... Maybe is something with the flexbox but im not sure...
try with:
<Image
source={require('../img/example.jpg')}
style={styles.backgroundImage}
blurRadius={1}>
<View style={styles.content}>
<Text style={styles.logo}> Example Text </Text>
</View>
</Image>