We Keep Coding

How to create the attached UI(grid with different squares) in react native?

Here's the UI I want to create:
How do I create the above UI in react native and have it scale on all devices? I tried using flexbox but I couldn't get the boxes to be squares. The code below is using fixed width and height in which I was thinking I could scale them in proportion to the flex container they're in but I don't know how that would be implemented and I haven't found anything similar so far.
return (
<View>
<View style={styles.cardContainer}>
<View style={styles.leftSection}></View>
<View style={styles.rightSection}>
<View style={styles.section}>
<View style={styles.smallSquare}></View>
<View style={styles.smallSquare}></View>
<View style={styles.smallSquare}></View>
</View>
<View style={styles.section}>
<View style={styles.smallSquare}></View>
<View style={styles.smallSquare}></View>
<View style={styles.smallSquare}></View>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
cardContainer: {
height: 152,
flexDirection: "row",
borderRadius: 26,
marginTop: 8,
padding: 5,
backgroundColor: "lightgrey",
justifyContent: "space-between",
},
leftSection: {
flex: 3,
backgroundColor: "teal",
borderRadius: 23,
},
rightSection: {
flex: 5,
marginHorizontal: 10,
},
largeSquare: {
width: "100%",
height: "100%",
borderRadius: 23,
},
section: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
smallSquare: {
backgroundColor: "teal",
borderRadius: 14,
width: 62,
height: 62,
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>

I just made the code for you. Just copy and play with it.
import React from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
const DATA = [1, 2, 3, 4, 5, 6];
const renderItem = ({ item }) => {
return <View style={styles.item}></View>;
};
function App() {
return (
<View style={styles.app}>
<View style={styles.letConatiner} />
<View style={{ flex: 2.5 }}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item}
numColumns={3}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
app: {
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
backgroundColor: "lightgrey",
padding: 10
},
letConatiner: {
height: "62%",
flex: 1,
backgroundColor: "teal",
borderRadius: 15,
marginTop: 10
},
item: {
flex: 1,
padding: 50,
backgroundColor: "green",
margin: 10,
borderRadius: 15,
height: "50%"
}
});
export default App;

Not the perfect solution I was hoping to find but it's a start. Maybe someone can build on it.
import { StatusBar } from "expo-status-bar";
import {
StyleSheet,
View,
Text,
Image,
Pressable,
FlatList,
Dimensions,
} from "react-native";
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
export default function HomeScreen() {
return (
<View style={styles.homeScreen}>
<View style={styles.cardOuter}>
<View style={styles.cardContainer}>
<View style={styles.leftSection}>
<View style={styles.bigThumbnail}></View>
</View>
<View style={styles.rightSection}>
<View style={styles.section}>
<View style={styles.smallThumbnail}></View>
<View style={styles.smallThumbnail}></View>
<View style={styles.smallThumbnail}></View>
</View>
<View style={styles.section}>
<View style={styles.smallThumbnail}></View>
<View style={styles.smallThumbnail}></View>
<View style={styles.smallThumbnail}></View>
</View>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
homeScreen: {
backgroundColor: "black",
flex: 1,
paddingHorizontal: 10,
},
cardOuter: {
paddingVertical: 4,
backgroundColor: "#eee",
borderRadius: 26,
},
cardContainer: {
height: windowHeight / 5.4,
flexDirection: "row",
borderRadius: 26,
paddingHorizontal: 10,
justifyContent: "center",
alignItems: "center",
},
leftSection: {
marginRight: 0,
},
rightSection: {
flex: 5,
},
bigThumbnail: {
backgroundColor: "teal",
borderRadius: 26,
width: windowWidth / 3,
height: "96%",
},
smallThumbnail: {
backgroundColor: "teal",
borderRadius: 14,
width: windowWidth / 6,
height: windowWidth / 6,
},
section: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingLeft: 10,
marginVertical: 0,
},
});

horizontal ScrollView is not scrolling

When adding horizontal={true} to my scrollview, I thought that would be enough to be able to scroll sideways. For some reason, even though there is enough content to scroll to, the images will not scroll continuously. If you copy and paste this code into snack.expo.io you will see what I mean.
I am not sure what is causing this issue, as I know the normal scrollview vertically works fine and scrolls like normal. I have also tried using nestedScrollenabled to true
Any insight at all is appreciated more than you know!
import React, { useState } from 'react';
import {Pressable, StyleSheet, Text, View, useWindowDimensions, Dimensions, Image, Animated, PanResponder,
TouchableOpacity, ScrollView, ImageBackground, Platform} from 'react-native';
import { SearchBar } from 'react-native-elements';
import {
scale,
verticalScale,
moderateScale,
ScaledSheet,
} from 'react-native-size-matters';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Images = [
{ id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
{ id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
]
const pressableTest = () => {
let textlog = '';
const [state, setState] = useState(0);
};
export default class Home extends React.Component {
renderImagesHorizontal = () => {
return Images.map((item, i) => {
return (
<View
style={{
width : '150%',
paddingLeft: scale(10),
paddingRight: scale(10),
paddingBottom: scale(15),
}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{
width: '100%',
height: scale(225),
shadowColor: '#000',
shadowOffset: { width: 1, height: 4 },
shadowOpacity: 1,
}}
imageStyle={{ borderRadius: 10 }}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
renderImagesVertical = () => {
return Images.map((item, i) => {
return (
<View style={{ paddingLeft: scale(10), paddingRight: scale(10), paddingBottom: scale(20) }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{ width:'100%', height: scale(125),
shadowColor: '#000',
shadowOffset: {width: 1, height: 7},
shadowOpacity: 1,}} imageStyle = {{ borderRadius: 20}}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
state = {
search: '',
};
updateSearch = (search) => {
this.setState({ search });
};
render() {
const { search } = this.state;
return (
<ScrollView style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
<View style={{flexDirection:'row', marginTop: scale(20)}}>
{/*this will proabbly say somethign different and probably have a different look to it but you get the idea
I was also trying to add a shadow to this but couldnt figure it out. */}
<Text style={{marginTop: scale(30) ,fontSize: scale(40), fontWeight: 'bold', color: '#FFFFFF', paddingLeft: scale(20)}}>
Home
</Text>
<View style={{paddingTop: scale(40), paddingLeft: scale(155)}}>
</View>
</View>
<SearchBar
placeholder="Search..."
onChangeText={this.updateSearch}
value={search}
round='true'
containerStyle={{backgroundColor: '#272933', borderBottomColor: 'transparent', borderTopColor: 'transparent',
paddingLeft: scale(20) , paddingRight: scale(20)}}
inputContainerStyle={{height: scale(30), width: scale(310), backgroundColor: '#3A3B3C'}}
searchIcon={() => <MaterialCommunityIcons name="glass-mug-variant" size={25} color='#87909A'/>}
clearIcon= 'null'
/>
<ScrollView
horizontal={true}
>
<View style={{ flex: 1, flexDirection : 'row', marginTop: 15 }}>{this.renderImagesHorizontal()}</View>
</ScrollView>
<View style={{ flex: 1, marginTop: 15 }}>{this.renderImagesVertical()}</View>
</ScrollView>
);
}
}
const styles = ScaledSheet.create({
starRating: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
category: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
name: {
fontWeight: 'bold',
color: 'white',
fontSize: '25#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
dot: {
color: 'white',
fontSize: '5#s',
paddingLeft: '5#s',
paddingRight: '5#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
money: {
color: 'white',
fontSize: '20#s',
},
});

in android you must add nestedScrollEnabled={true} to Enables nested scrolling for Android API level 21+. see here
<ScrollView>
<ScrollView nestedScrollEnabled={true}>
</ScrollView>
</ScrollView>
try snack here (test in android & ios not web)

React Native app works on iOS but comes up with error on Android posts.map not defined

I have created a simple program to display information from my website on the app. It works on iOS but on my Android device an error shows up :
posts.map is not a function. This is my code:
import React, { Component } from 'react';
import {
View,
Text,
ActivityIndicator,
ScrollView,
StyleSheet,
Image,
Header,
} from 'react-native';
let lw = 100;
import Img from 'react-image';
let li = 'https://www.teanewsnetwork.com/profileicons/';
let bean = 'azure.jpg';
export default class App extends Component {
state = {
loading: true,
error: false,
posts: [],
};
componentWillMount = async () => {
try {
const response = await fetch(
'https://www.teanewsnetwork.com/api/fetcharticles.php?code=#NIL7*GKD60JTRTEFZ0CkvpHMJJW^-9q&starting=0&limit=40'
);
const posts = await response.json();
this.setState({ loading: false, posts });
} catch (e) {
this.setState({ loading: false, error: true });
}
};
renderPost = ({ id, title, content, authorimage, authorname }, i) => {
let b = { authorname };
return (
<View style={styles.postContent}>
<View
style={{
flex: 1,
flexDirection: 'column',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={styles.postauthor}>{title} </Text>
<Image
source={{
uri: `https://teanewsnetwork.com/profileicons/${authorimage}`,
}}
defaultSource={require('./contact-outline.png')}
style={{
width: lw,
height: lw,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: lw / 2,
}}
/>
<Text style={styles.postauthor}>{authorname}</Text>
</View>
<Text style={styles.postBody}>{content}</Text>
</View>
);
};
render() {
const {posts, loading, error} = this.state
if (loading) {
return (
<View style={styles.center}>
<ActivityIndicator animating={true} />
</View>
)
}
if (error) {
return (
<View style={styles.center}>
<Text>
Failed to load posts!
</Text>
</View>
)
}
return (
<ScrollView style={styles.container}>
{posts.map(this.renderPost)}
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
borderBottomWidth: 0,
borderBottomColor: 'red',
top: 100,
zIndex: 6,
},
postauthor: {
flex: 1,
borderBottomWidth: 0,
borderBottomColor: 'red',
paddingVertical: 25,
fontSize: 18,
paddingRight: 15,
left: 10,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
},
postContent: {
flex: 1,
borderBottomWidth: 20,
borderBottomColor: '#EEE',
borderRadius: 4,
fontSize: 18,
left: 0,
paddingRight: 15,
justifyContent: 'center',
alignItems: 'center',
textAlignVertical: 'center',
textAlign: 'center',
},
postBody: {
marginTop: 1,
fontSize: 18,
color: 'black',
left: 10,
textAlign: 'center',
},
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
I am a beginner coder on react native and would like to have some help here. The code works on iOS emulator with EXPO but doesnt work on my Android Device.
Thanks in Advance!

Most likely posts is not a array, check the type of posts.

Take picture, save and access Camera with react-native

I am studing react-native a 4 months and I am Build my App. I got problems with Camera. I am trying to take a picture, save and access the photo. I take a picture but I don't know where picture goes and how to acess.
I am using expo import camera, because when I use from react a get some error.
this is my code:
import React, {Component} from 'react';
import {Text, View, TouchableOpacity, Image,TouchableHighlight,Vibration} from 'react-native';
//import Camera from 'react-native-camera';
import {Camera, Permissions,} from 'expo';
const myStyle = {
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: 'red',
padding: 10,
margin: 40
},
main2: {
flex: 1,
//alignItems: 'flex-start',
flexDirection: 'row',
justifyContent: 'space-between',
},
main: {
flex: 1,
},
borda: {
//flex: 0.1,
alignItems: 'flex-end',
backgroundColor: 'black',
height: 110,
},
borda2: {
backgroundColor: 'black',
width: 60,
},
borda3: {
width: 60,
backgroundColor: 'black',
},
borda4: {
height: 120,
backgroundColor: 'black',
//flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent:'space-between',
},
texto:{
fontSize: 18,
marginBottom: 40,
color: 'white',
},
textoButton:{
fontSize: 18,
color: 'white',
marginTop: 5,
},
button:{
alignSelf: 'flex-end',
alignItems: 'center',
backgroundColor:'transparent',
flexDirection: 'row',
justifyContent:'space-between'
},
cameraStyle:{
width: 70,
height: 57,
//margin:30,
alignItems: 'center',
tintColor: 'white',
},
flipStyle:{
width: 52,
height: 57,
marginLeft:10,
alignItems: 'center',
tintColor: 'white',
},
gallerystyle:{
width: 64,
height: 57,
marginLeft:10,
alignItems: 'center',
tintColor: 'white',
marginRight: 10,
},
closeStyle:{
width: 56,
height: 57,
marginTop: 30,
marginRight: 20,
alignItems: 'flex-end',
tintColor: 'white',
justifyContent:'flex-end'
},
box:{
width: 'auto',
justifyContent: 'space-between',
flexDirection: 'column',
alignItems: 'center',
},
};
export default class CameraAcess extends Component {
constructor(props) {
super(props);
this.state = {hasCameraPermission: null, type: Camera.Constants.Type.back,};
}
async componentWillMount() {
const {status} = await Permissions.askAsync(Permissions.CAMERA);
this.setState({hasCameraPermission: status === 'granted'});
}
snap = async function(){
if (this.camera) {
this.camera.takePictureAsync().then(data => {
FileSystem.moveAsync({
from: data,
to: '${FileSystem.documentDirectory}photos/Photo_${this.state .photoId}.jpg',
}).then(() => {
this.setState({
photoId: this.state.photoId + 1,
});
Vibration.vibrate();
})
.catch((e) => {
console.log(e, 'ERROR');
});
})
.catch((e) => {
console.log(e, 'takePicture ERROR');
});
}
console.log('I took the picture');
};
cameraPhoto = require('./Images/camera.png');
flipPhoto = require('./Images/flip.png');
closePhoto = require('./Images/close.png');
galleryPhoto = require('./Images/gallery.png');
render() {
const { main,main2, borda, borda2, borda3,borda4,cameraStyle,flipStyle,closeStyle,box,textoButton,gallerystyle} = myStyle;
const {hasCameraPermission} = this.state;
if (hasCameraPermission === null) {
return <View/>;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else {
return (
<View style={main}>
<Camera style={main} type={this.state.type}>
<TouchableHighlight onPress={() => {this.props.navigator.push({id: 'MenuPrincipal'});}}
style={borda} underlayColor={'black'} activeOpacity={0.6}>
<Image source={this.closePhoto} style={[closeStyle]}/>
</TouchableHighlight>
<View style={main2}>
<View style={[borda2]}/>
<View style={[borda3]}/>
</View>
<View style={[borda4]}>
<TouchableOpacity onPress={() => {this.setState({type: this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front : Camera.Constants.Type.back,});}}>
<View style={box}>
<Image source={this.flipPhoto} style={[flipStyle]}/>
<Text style={textoButton}>
Flip
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.snap()}}>
<View style={box}>
<Image source={this.cameraPhoto} style={[cameraStyle]}/>
<Text style={textoButton}>
Capture
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {false}}>
<View style={box}>
<Image source={this.galleryPhoto} style={[gallerystyle]}/>
<Text style={textoButton}>
Gallery
</Text>
</View>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
}
}
Someone help me to solve this problem and please be especific and clearly in your explanation, every details are necessary to me. I need this to end my App.

If I were you I would do
console.log(data);
then you can see what the promise returns in the XDE. You should, at the very least, see the following properties: height, width, uri. Uri will show you exactly where that image is being stored in the cache.

Dynamic color in react native

I am new to react native. And I would like to create dynamic color of my application on the basis of selection.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
Image,
NavigatorIOS,
AlertIOS,
ListView,
ScrollView,
TouchableHighlight,
View
} from 'react-native';
import {
times,
uniqueId
} from 'lodash';
var Accordion = require('react-native-accordion/src/index.js');
var my = '#eee';
class AwesomeProject extends Component {
render() {
return (
<View style = {styles.group} >
<NavigatorIOS style = {styles.group}
initialRoute = {{
component: AccordionList,
title: 'Color Selector',
rightButtonIcon: require('./img/a.png'),
onRightButtonPress: () => {
AlertIOS.alert(
'Select Color',
null, [{
text: 'Red',
onPress: () =>setColor( 'red'),
}, {
text: 'Blue',
onPress: () => setColor( 'blue'),
}]
);
}
}
}
barTintColor = "#0391D7"
titleTextColor = "#fff"
tintColor = '#fff' />
<View style = {styles.line}/>
</View>
);
}
}
setColor = function(color){
if(color == 'blue')
my = '#eee';
else
my = '#aaa';
}
const AccordionList = React.createClass({
getInitialState() {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
return {
dataSource: ds.cloneWithRows(times(6, uniqueId.bind(null, 'ball_'))),
};
},
render() {
return (
<View style = {{flex: 1}} >
<ListView dataSource = {this.state.dataSource}
renderRow = {this._renderRow}
/>
</View>
);
},
_renderHeader() {
return ( <View style = { styles.listView } >
<Image style = {styles.icon}
source = {require('./img/1.jpg')}/>
<Text> Click to Expand {my}< /Text>
</View>
);
},
_renderContent() {
return ( <View style = {styles.container} >
<Text style = {styles.welcome} >
{
'greeting'
}
Welcome to React Native!
</Text>
<Text style = {
styles.instructions
} >
To get started, edit index.ios.js
</Text>
<Text style = {
styles.instructions
} >
Press Cmd + R to reload, {
'\n'
}
Cmd + D or shake
for dev menu
</Text>
</View>
);
},
_renderRow(rowData) {
return ( <Accordion header = {
this._renderHeader()
}
content = {
this._renderContent()
}
duration = {
300
}
easing = "easeOutCubic" />
);
}
});
const styles = StyleSheet.create({
icon: {
height: 20,
width: 20,
alignItems: 'flex-end',
borderWidth: 1
},
listView: {
alignItems: 'flex-end',
paddingTop: 15,
paddingRight: 15,
paddingLeft: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: my,
backgroundColor: my,
},
line: {
backgroundColor: '#bbbbbb',
height: StyleSheet.hairlineWidth,
},
container: {
flex: 1,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'flex-end',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#3333f3',
marginBottom: 5,
},
group: {
backgroundColor: 'white',
flex: 1
},
groupSpace: {
height: 15,
padding: 10
},
});
const styles_a = StyleSheet.create({
icon: {
height: 30,
width: 30
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
line: {
backgroundColor: '#bbbbbb',
height: StyleSheet.hairlineWidth,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#3333f3',
marginBottom: 5,
},
listView: {
alignItems: 'flex-start',
paddingTop: 15,
paddingRight: 15,
paddingLeft: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: my,
backgroundColor: '#fafafa',
},
group: {
backgroundColor: 'white',
flex: 1,
padding: 10
},
groupSpace: {
height: 15,
padding: 10
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Whenever I select a new color and alert it, it shows me the color selection but, doesn't update the background color of my list.
Any idea what I am doing wrong.

Try this:
Instead of storing the color in a global variable, you should store it in the component's state. If you don't know what state means in React, consider reading this article.
I see you call a setColor function to change the variable my. Instead you could call
this.setState({currentColor: 'red'})
and then in a render() method, you could append it to an array to overwrite the default style:
<SomeComponent style={[styles.myStyle, {backgroundColor: this.state.currentColor}]}/>
The point of doing this is that setState triggers a new UI rendering.