I am a newbie to react native, I want to make this layout possible I have following code but it puts the logo inside grid
What I am looking for is this
import React, { Component } from 'react';
import GridView from 'react-native-super-grid';
export default class ProfileScreen extends Component {
static navigationOptions = {
title: 'Details',
};
render() {
const { navigate } = this.props.navigation;
const items = [
{ name: require('./images/shopping-cart.png'),code: '#2ecc71' }, { name: require('./images/home.png'), code: '#2ecc71' },
{ name: require('./images/money-bag.png'), code: '#2ecc71' }, { name: require('./images/alert.png'), code: '#2ecc71' }
];
return (
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<View style={styles.mainLayout}>
<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={styles.itemContainer}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</View>
</ImageBackground>
);
}
}
const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
},
logoFit: {
width: imageHeight,
height: imageWidth
},
mainLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
});
Get rid of that grid component. You don't need it for such a simple thing. It's complicating things, and as it's not a regular/common component we don't know how it's affecting things.
This looks quite simple:
<View>
<View style={{}}>
<Image />
</View>
<View style={{flexDirection:'row'}}>
<View>
<Text>row 1, col 1</Text>
</View>
<View>
<Text>row 1, col2Text>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View>
<Text>row 2, col 1</Text>
</View>
<View>
<Text>row 2, col2Text>
</View>
</View>
<View style={{}}>
<Button title="Login" />
</View>
</View>
Here's another similar question - How to create 3x3 grid menu in react native without 3rd party lib?
Inside navigationOptions You should remove the title property and define a header property and put your Image there. Like this
static navigationOptions = {
header:(<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>)
};
Or... YOu can just make the header null as
static navigationOptions = {
header:null
};
and your current code would work as you want it to be.
Related
In my containerTop, I am rendering a list inside TripOptionsSelectorthat hides towards the end.
I have tried adding marginBottom/paddingBottom to containerOptionsSelectorbut it makes no difference. I don't want to add a height to my because it can vary according to different phones.
How else can I simply extend the View such that the text doesn't hide?
export const MapScreen: React.FunctionComponent = () => {
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.containerTop}>
<BackArrow />
<JourneyLocationsTextContainer />
<View style={styles.containerOptionsSelector}>
<TripOptionsSelector />
</View>
</View>
<View style={styles.containerMap}>
<MapContainer />
<ButtonsContainer />
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
safeAreaViewContainer: { flex: 1 },
container: { flex: 1, backgroundColor: 'white'},
containerTop: { flex: 1, backgroundColor: '#323443' },
containerOptionsSelector: {
marginTop: moderateScale(15),
marginLeft: moderateScale(20),
},
containerMap: {
flex: 2
},
});
export const TripOptionsSelector: React.FunctionComponent = () => {
return (
<View style={styles.offerContainer}>
<Text style={styles.offerText}>Jetzt</Text>
<Text style={styles.offerText}>1 Person</Text>
<Text style={styles.offerText} >Filter</Text>
</View>
);
};
const styles = StyleSheet.create({
offerContainer: {
flexDirection: 'row',
},
You just remove flex from styles.containerTop - so it's sized based purely on its content.
I have a problem when I separate some flat-list to different components. How can I arrange render flat-list like the sample form (Picture " Sample UI")? I try and it doesn't work. It rendered flat list A then flat list B. Please help me solve it. Have another way can solve it.
Thanks.
My code is here.
Header component
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'
//Component render flat-list. Show name of artist and albums.
export default class Header extends Component{
renderItem(item) {
return(
<View style = {styles.flatlist}>
<Image
source = {{uri: item.item.thumbnail_image}} style ={styles.imageThumbnail}>
</Image>
<View style= {{
flex: 1,
flexDirection: 'column'
}}>
//show title
<Text style = {styles.textTitle}>{item.item.title}</Text>
//show name of artist
<Text style = {styles.textArtist}>{item.item.artist}</Text>
</View>
</View>
);
}
render(){
return(
<View style = {{flex: 1}}>
<View style = {{flex: 1}}>
<FlatList
data = {data}
renderItem = {this.renderItem}
keyExtractor = { (item) => item.title.toString() }
/>
</View>
</View>
);
}
}
//style
const styles = StyleSheet.create({
container: {
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#d6d7da',
borderRadius: 4,
borderWidth: 0.5,
fontSize: 1,
height: 50,
marginLeft: 10,
marginRight:10
},
text: {
fontSize: 20,
},
flatlist: {
flex: 1,
flexDirection: 'row',
marginRight: 20,
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
borderWidth: 0.4,
borderColor: '#d6d7da',
marginTop: 20,
height: 60
},
imageThumbnail: {
width: 50,
height: 50,
margin: 5
},
image: {
width: 320,
height: 240,
margin: 5
},
})
Image Component
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'
// Component show image of albums
export default class ImageCom extends Component{
renderItem(item) {
return(
<View style = {styles.flatlist}>
//Image of albums
<Image
source = {{uri: item.item.image}} style ={styles.image}>
</Image>
</View>
);
}
render(){
return(
<View style = {{flex: 1}}>
<View style = {{flex: 1}}>
<FlatList
data = {data}
renderItem = {this.renderItem}
keyExtractor = { (item) => item.title.toString() }
/>
</View>
</View>
);
}
}
//style sheet
const styles = StyleSheet.create({
flatlist: {
flex: 1,
flexDirection: 'row',
marginRight: 20,
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
borderWidth: 0.4,
borderColor: '#d6d7da',
marginTop: 5,
height: 250
},
image: {
width: 320,
height: 240,
margin: 5
},
})
App.js
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList} from 'react-native'
import Tabbar from './src/components/Tabbar'
import Header from './src/components/Header'
import ImageCom from './src/components/ImageCom'
//Combine components and show it on UI
export default class App extends Component{
render() {
return(
<View style = {styles.container}>
<Tabbar /> //Hello
<Header /> //Artist and albums
<ImageCom /> //Image of albums
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
},
});
hi as #angelos_lex said you dont require two flatlists i tink so you can display that image component image in header component only
export default class Header extends Component{
renderItem(item) {
return(
<View style = {{flexDirection:'colomn'}}> **//give require styles**
<View style = {styles.flatlist}>
<Image
source = {{uri: item.item.thumbnail_image}} style = {styles.imageThumbnail}>
</Image>
<View style= {{ flex: 1,flexDirection: 'column' }}>
//show title
<Text style = {styles.textTitle}>{item.item.title}</Text>
//show name of artist
<Text style = {styles.textArtist}>{item.item.artist}</Text>
</View>
</View>
<Image source = {{uri: item.item.image}} style ={styles.image}/> **// i am not sure what uri should be given**
</View>
);
**// remaining code**
Why you need two separate flatlists for this?
Since you want it with order: header_No1->image_No1->footer_No1 then header_No2->image_No2->footer_No2, then one Flatlist is enough, which will render "header" "image" and "footer" components inside.
I'm trying to make a grid with ScrollView but I don't get the expected result
<ScrollView style={{flex:1, flexDirection:'row', flexWrap:'wrap'}}>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
</ScrollView>
RESULT:
You should add style to your ScrollView contentContainerStyle to have flexDirection: 'row' and flexWrap: 'wrap'
import React, { Component } from 'react';
import { Text, StyleSheet, ScrollView } from 'react-native';
export default class App extends Component {
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<Text style={styles.cell}>
</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap'
},
cell: {
width: 100,
height: 100,
backgroundColor: 'red'
},
});
Wrap each Text into View
<View>
<Text style={{width:100, height:100, backgroundColor:'red'}}>Text</Text>
</View>
I am creating list of items on react native app. I want to make swipe to left and right every item of this list. So when I swipe to left I want to hide Views that was rendered and show new elements. Also when I swipe to right I want to display other elements that will be different from that element that will be rendered when I swipe left. I found this library called "react-native-swipe-gestures" but I can't figure out how to display and hide elements with it. I declared some items but when I try to display it i got an error that "can't find variable 'item'" maybe you will have some explain to me how I should use it to actually get working swipe left and right.
import React, {Component} from 'react';
import {
ScrollView,
Text,
View,
Image,
Button
} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import {List, ListItem} from "react-native-elements";
class Offers extends Component {
constructor(props) {
super(props);
this.state = {
myText: '',
gestureName: 'none',
icons: '',
guardian: '',
area: '',
rooms: '',
floor: '',
market: '',
year: '',
pricePerMeter: '',
};
}
onSwipeRight(gestureState) {
this.setState({myText: 'You swiped right!'});
}
onSwipe(gestureName, gestureState) {
const {SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
this.setState({gestureName: gestureName});
switch (gestureName) {
case SWIPE_LEFT:
this.setState({backgroundColor: 'blue'});
break;
case SWIPE_RIGHT:
this.setState({backgroundColor: 'yellow'});
break;
}
}
onSwipeLeft(gestureState) {
this.setState({
guardian: item.offerGuardian, //items from const offers
area: item.offerArea,
floor: item.offerFloor,
rooms: item.offerRooms,
market: item.offerMarket,
year: item.offerYear,
pricePerMeter: item.offerPricePerMeter,
})
}
render() {
const config = {
velocityThreshold: 0.3,
directionalOffsetThreshold: 80
};
const offers = [
{
offerNumber: 'TEST912697',
offerLocation: 'Warszawa Białołęka',
offerStreet: 'ul. Bruszewska',
offerType: 'Mieszkanie',
offerStatus: 'Akt. Wewnętrzna',
offerStatusColor: '#0FBEB2',
offerAddDate: '2017-09-20 12:08:06',
offerPrice: '2 450 000',
photo: 'https://static.pexels.com/photos/164516/pexels-photo-164516.jpeg',
offerGuardian: 'Adam Borek',
offerTransactionType: 'sprzedaż',
offerArea: '50 m2',
offerRooms: '2 pokoje',
offerFloor: '1 z 2',
offerYear: '2005 rok',
offerMarket: 'rynek pierwotny',
offerPricePerMeter: '5000 zł/m2'
},
];
return (
<ScrollView>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end'
}}>
<View style={{marginRight: 20, marginTop: 10}}>
<Button title="akcje"/>
</View>
</View>
{offers.map((item, i) => (
<View key={i}>
<List>
<GestureRecognizer
onSwipe={(direction, state) => this.onSwipe(direction, state)}
onSwipeLeft={(state) => this.onSwipeLeft(state)}
onSwipeRight={(state) => this.onSwipeRight(state)}
config={config}
style={{
flex: 1,
backgroundColor: this.state.backgroundColor
}}
>
<ListItem
roundAvatar
subtitle={
<View style={{flexDirection: 'row'}}>
<View>
<Text>{this.state.myText}</Text>
<Text>{this.state.guardian}</Text>
<Text>{this.state.area}</Text>
<Text>{this.state.floor}</Text>
<Text>{this.state.market}</Text>
<Text>{this.state.year}</Text>
<Text>{this.state.pricePerMeter}</Text>
<Image source={require('../../gfx/lel.jpg')}
style={{
height: 100,
width: 150
}}/>
</View>
<View style={{
marginLeft: 5,
flexDirection: 'row',
flexWrap: 'wrap'
}}>
<View style={{width: 140}}>
<Text>
{item.offerLocation}
{"\n"}
{item.offerStreet}
{"\n"}
{item.offerType} na {item.offerTransactionType}
{"\n"}
{item.offerNumber}
</Text>
</View>
<View>
<View style={{
justifyContent: 'flex-end',
width: 95,
height: 30,
backgroundColor: item.offerStatusColor
}}>
<Text style={{color: '#fff', textAlign: 'center'}}>
{item.offerStatus}
</Text>
</View>
<View style={{
flexDirection: 'column',
alignItems: 'flex-end',
flexWrap: 'wrap'
}}>
<Text style={{fontSize: 20}}>
{"\n"}
{"\n"}
{item.offerPrice}
</Text>
</View>
</View>
</View>
</View>
}
onPress={() => this.props.navigation.navigate('OffersDetails')}
/>
</GestureRecognizer>
</List>
</View>
))}
</ScrollView>
)
}
}
export default Offers;
I would recommend trying out this libray react-native-swipe-list-view. It is well documented and easy to use for any type of swipable row. https://github.com/jemise111/react-native-swipe-list-view
The basic concept is that you have one element in front of a hidden element. When you swipe it just reveals the hidden element below.
I've been dabbling with some react native code and found that my view does not have a right boundary in both android and iOS renders. So when I add a horizontal margin, the view displays margin only on the left like this.
I am also attaching my code and styles to guide me on where I would have gone wrong.
Login.js
import React,{Component} from 'react';
import {View,ToolbarAndroid,Text, Image, StatusBar,TextInput, TouchableOpacity} from 'react-native';
import styles from './styles.js'
class LogIn extends Component {
constructor(props) {
super(props)
this.state = {hostName: '', userName: '', password: ''}
}
onButtonPress() {
this.props.onSubmit && this.props.onSubmit(this.state);
}
render() {
return(
<Image style={styles.container} source={images.background}>
<StatusBar backgroundColor="#00EF6C00" translucent={true}/>
<View style={styles.logocontainer}>
<FitImage source={images.logo} resizeMode="contain" resizeMethod="scale" style= {{width: 300,position: 'absolute', left: 50, height: 100}}/>
</View>
<View style={styles.comp_container}>
<TextInput placeholder="Host Name" style={{height: 40}} onChangeText={(text) => this.setState({hostName: text})}/>
<TextInput placeholder="User Name" style={{height: 40}} onChangeText={(text) => this.setState({userName: text})}/>
<TextInput placeholder="Password" style={{height: 40}} onChangeText={(text) => this.setState({password: text})}/>
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={{height: 40, flex: 1, flexDirection: 'row'}}>
<Text style={{flex: 1}}> Submit </Text>
</TouchableOpacity>
</View>
</Image>
)
}
}
LogIn.propTypes = {
onSubmit: React.PropTypes.func,
}
export default LogIn;
Also Please find the attached stylesheet for further information on style
import { StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
toolbar: {
backgroundColor: '#EF6C00',
height: 56,
elevation: 3,
},
textInput: {
borderRadius: 20,
borderColor: "#FFFFFF",
height: 40,
},
button: {
height: 40,
},
logocontainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
},
comp_container: {
flex: 2,
flexDirection: 'column',
justifyContent: 'center',
marginHorizontal: 16,
}
});
export default styles
Edit: It is almost palpable that the problem should be with react-native unable to decide where the view boundary is. So instead of wrapping within the view, it decides to extent it. I also would love to get to know of any tools which can help me debug the UI issues, like the uiautomationviewer for android.
You do not specify width nor resizeMode in background image so it overflows screen. By default alignItems is stretch, TouchableOpacity fills container on horizontal and also overflows screen.