We Keep Coding

BorderBottom added top of the view React Native

I want to add a border to the bottom of the <View> (like <hr>) for that reason i added that code to my style:
export default function Chat() {
return (
<View>
<View style={styles.inner}>
<CircleCard />
<CircleCard />
<CircleCard />
<CircleCard />
</View>
</View>
);
}
const styles = StyleSheet.create({
inner: {
width: "100%",
height: "85%",
flexDirection: "row",
flexWrap: "wrap",
flex: 1,
borderBottomColor: "black",
borderBottomWidth: 1,
},
});
But this code draw the border to top of the instead of Bottom.
Also The CircleCard component:
export default function CircleCard() {
return (
<View style={styles.container}>
<Image
style={styles.imageStyle}
source={require("../assets/games/Among-us.png")}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { width: 60, height: 60, margin: 5, marginTop: 10 },
imageStyle: {
width: "100%",
height: "100%",
overflow: "hidden",
resizeMode: "stretch",
borderRadius: 140,
},
});
How can I fix it?
Note: I added a negative marginTop to my styles.inner but than when i add a new component all page broken.
Here is what i want to make:

Working app : Expo Snack
import * as React from 'react';
import { View, StyleSheet, Image } from 'react-native';
export default function Chat() {
return (
<View>
<View style={styles.inner}>
<CircleCard />
<CircleCard />
<CircleCard />
<CircleCard />
</View>
</View>
);
}
function CircleCard() {
return (
<View style={styles.container}>
<Image
style={styles.imageStyle}
source={{
uri:
'https://www.graphicpie.com/wp-content/uploads/2020/11/red-among-us-png-1684x2048.png',
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: 60,
height: 60,
margin: 5,
marginTop: 10,
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: 30,
},
imageStyle: {
width: '100%',
height: '100%',
overflow: 'hidden',
resizeMode: 'stretch',
borderRadius: 140,
},
inner: {
width: '100%',
flexDirection: 'row',
flexWrap: 'wrap',
/**
* i guess "rgba(21,21,21,0.2)" looks better than then plain "black"
* borderBottomColor: "rgba(21,21,21,0.2)",
*/
borderBottomColor: 'black',
borderBottomWidth: 1,
},
});

React Native - Modal Trigger button always visible

I am trying to make an Action Button on the tapbar which deploys multiple items using Modal. The issue I have is that I want the action button to stay visible so the user can toggle between the modal.
Here you can see the action button visible
obviously disappears once the modal is activated.
Tried:
On the modal make another button, but on different device sizes the button moves.
Code
import React, {useState} from 'react';
import {
Dimensions,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';
const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
: console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);
Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();
const TabBarAdvancedButton = ({bgColor, ...props}) => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<View style={styles.container} pointerEvents="box-none">
<TabBg color={'white'} style={styles.background} />
<TouchableOpacity
style={styles.button}
onPress={props.onPress}
activeOpacity={0.9}
onPress={() => setModalVisible(true)}>
<Entypo name="plus" style={styles.buttonIcon} />
</TouchableOpacity>
</View>
<Modal
backdropOpacity={0.8}
animationIn="fadeIn"
animationOut="fadeOut"
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}>
{/*close button */}
<View style={styles.content}>
<TouchableOpacity
style={{
position: 'absolute',
backgroundColor: 'red',
alignSelf: 'center',
}}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
marginBottom: height * 0.02,
}}>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
};
export default TabBarAdvancedButton;
const styles = StyleSheet.create({
container: {
position: 'relative',
width: 75,
alignItems: 'center',
},
background: {
position: 'absolute',
top: 0,
},
button: {
top: -22.5,
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 27,
backgroundColor: colors.PRIMARY_COLOR_DARK,
},
buttonIcon: {
fontSize: 16,
color: '#F6F7EB',
},
content: {
backgroundColor: 'transparent',
padding: 60,
justifyContent: 'space-evenly',
alignItems: 'center',
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: 'row',
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: 'flex-end',
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: '#468CFF',
borderWidth: 3.5,
backgroundColor: '#366ABF',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
},
});

You can try the below code, you should be adding the action button inside the modal as well, so that will be displayed inside modal.
export default ActionButton = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
<View style={styles.container}>
<Modal
backdropOpacity={0.8}
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}
>
{/*close button */}
<View style={styles.content}>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "space-around",
}}
>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
style={[styles.buttonItem, { bottom: 130 }]}
>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
</View>
</View>
</Modal>
</View>
</>
);
};
const styles = StyleSheet.create({
content: {
backgroundColor: "transparent",
padding: 60,
justifyContent: "space-evenly",
alignItems: "center",
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: "row",
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: "flex-end",
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: "#468CFF",
borderWidth: 3.5,
backgroundColor: "#366ABF",
bottom: 50,
justifyContent: "center",
alignItems: "center",
},
});

React Native Scroll View with flex

I'm trying to create a modal, which has 2 parts: ScrollView and TouchableOpacity.
So i used react-native-modal and my app.js:
import React, { Component } from "react";
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View
} from "react-native";
import Modal from "react-native-modal";
export default class Example extends Component {
state = {
isModalVisible: false
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => this.setState({ isModalVisible: true })}
>
<View style={styles.button}>
<Text>Open It!</Text>
</View>
</TouchableOpacity>
<Modal
isVisible={this.state.isModalVisible}
onBackButtonPress={() => this.setState({ isModalVisible: false })}
>
<View style={styles.modalContent}>
<View style={{ flex: 9 }}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flex: 3, backgroundColor: "red" }}>
<Text>A</Text>
</View>
<View style={{ flex: 2, backgroundColor: "yellow" }}>
<Text>B</Text>
</View>
<View style={{ flex: 1, backgroundColor: "green" }}>
<Text>C</Text>
</View>
<View style={{ flex: 1, backgroundColor: "blue" }}>
<Text>D</Text>
</View>
<View style={{ flex: 1, backgroundColor: "cyan" }}>
<Text>E</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
</ScrollView>
</View>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.setState({ isModalVisible: false })}
>
<Text>Add Package</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
button: {
backgroundColor: "lightblue",
padding: 12,
margin: 16,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)"
},
modalContent: {
flex: 1,
backgroundColor: "white",
padding: 22,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)"
}
});
But now it's unscrollable! I tried to remove the flexGrow: 1 but then the child's flex: x lose its effect!
Please consider that I DON'T WANT to use height and width!
Any idea?
Thanks in advance!

Formatting error React Native/Firebase

Problem
I am creating a very simple app that will let users upload posts to firebase, and then the app will render all of the posts on firebase. When I added the FlatList code to render the posts on Firebase, I got an error (bottom of question). I would love help fixing this error, and I have no idea what caused it.
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var newPostRef = ref.push();
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
onPress={() => {
newPostRef.set({ content:this.state.postInput });
this.setState({ postInput: "Your post was succsesfully uploaded! :)" })
}}
title=" + "
color="#fe8200"
/>
{/*var path = newPostRef.toString(); */}
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#147c41', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#0f582d', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#9dcd46', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#6c8f31', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#d3832e', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#935b1e', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<FlatList>
data={ref}
renderItem={
({item}) =>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
{/*Error happened here*/} <View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{item.content}
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</FlatList>
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});
Error
unknown: Adjacent JSX elements must be wrapped in an enclosing tag(121:15)

The problem is, when rendering a component/group of for a FlatList, you need to enclose all components in that render with a parent View, hence 'wrapping them in an enclosing tag'. Whenever you have multiple Views next to eachother, you MUST enclose them in a parent View, take this as a rule of thumb moving forward. EG
<View>
<View />
<View />
</View>
Now for your problem, You are going to want to add a View here
({item}) =>
<View> //HERE
and then close it at the end. Also, you have not closed the opening FlatList component declaration, so this should be at the end of that part also. Your renderItem prop should now look like this
renderItem={
({item}) =>
<View>
<View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{item.content}
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</View>
}>
Note you should also do a majority of your styling in this parent view, but for now this solution should work. You will often see in tutorials styles.container, and this is usually what is ment, the container of all the sub-view components.

On react native when I put an if statment in the render section checking the value of a variable I get an error

I am trying to load the font by having so that when you press a button, your font will load. When I put the if statement in the render section, I get an error saying that:
RawText "if (fontLoaded=="true")" must be wrapped in an explicit text component. Please help me solve this, I am very confused.
I am very new to react native so this may be a very basic question, I am sorry.
My code is below:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
var fontLoaded = false;
export default class App extends React.Component {
componentDidMount() {
Expo.Font.loadAsync({
'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#841584"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
if (fontLoaded=="true") {
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput>
tyle={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
</TextInput>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'center',
},
});

The problem is that you're trying to use raw javascript inside your html. You can't use the regular if statement inside the render() function but you can use the inline conditional statement like this:
{isTrue ? (<div>True</div>) : (<div>False</div>)}
Read more about it here
In your case it'll be something like this:
render() {
return (
{/*your code as usual*/}
{fontLoaded ? (
<View style={styles.container}>
{/*your code as usual*/}
</View>) :
null}

Use && to achieve the same result. You have to use JSX condition inside the render method. You can write your if condition like below.
{fontLoaded &&
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput>
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
</TextInput>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>
}