styling of background color in pixel phone - reactjs

I want to put the logo of the company so that it stretches out from top left corner to the top right corner with width of 10. Below is my code. My image is not showing properly. It shows in the middle of the screen with width going outside of the phone.If I put position: absolute then the image disappears from the phone.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();
const styles = StyleSheet.create({
card: {
marginTop: 10,
paddingBottom: 20,
marginBottom: 20,
borderColor: 'lightgrey',
borderWidth: 0.5,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4F6D7A',
height: 550,
alignSelf:'center',
width:500,
position: 'relative',
},
title1: {
top: 10,
left: 80,
fontSize: 24,
},
title2: {
top: 35,
left: 82,
fontSize: 18,
},
image: {
flex: 0,
height: 100,
width: 333,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
closeIcon: {
position: 'absolute',
top: 5,
left: 295,
color: 'rgba(233,166,154,0.8)',
backgroundColor: 'rgba(255,255,255,0)',
},
icon: {
position: 'absolute',
top: 15,
left: 0,
color: 'white',
backgroundColor: 'rgba(255,255,255,0)',
},
textArea: {
flexDirection: 'row',
paddingLeft: 20,
paddingTop: 10,
width: 260,
},
textIcons: {
color: '#26a69a',
},
actionArea: {
paddingTop: 10,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
title:{
justifyContent: 'center',
paddingTop: 10,
alignItems: 'center',
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 22,
color: '#F5FCFF',
},
SerContent:{
fontWeight: 'bold',
fontSize: 16,
paddingTop: 10,
alignSelf: 'center',
color: '#F5FCFF'
},
underLineText: {
fontSize: 17,
textDecorationLine: 'underline',
color: '#F5FCFF',
fontWeight: 'bold',
textAlign: 'center',
},
dir:{
flexDirection:'row',
paddingTop: 30,
textAlign: 'center',
fontSize: 17,
alignSelf: 'center'
} ,
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 17,
fontWeight: 'bold',
color: '#F5FCFF',
},
toolbar: {
flexDirection: 'row', //Step 1
},
toolbarTitle:{
width: 10,
top: 0,
left: 0,
bottom: 0,
right: 0,
flex:1 ,
position:'absolute' //Step 3
},
});
class ServiceDetail extends Component {
handleClick = (link) => {
Linking.canOpenURL(link).then(suppported => {
if (supported) {
Linking.openURL(link);
} else {
console.log('Don\'t know how to open URI: ' + link);
}
});
};
render() {
var destUrl = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr1 + '+' + 'field'
var destUrl1 = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr2 + '+' + 'field'
return (
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.container}>
<View style={styles.toolbar}>
<Image
resizeMode='contain'
style={styles.toolbarTitle}
source={require('../Resources/LogoWithDesc.jpg')} />
</View>
<SimpleIcon name={'close'} size={30} style={styles.closeIcon}
onPress={() => this.props.noneSelected()} />
<Text style={styles.title}>{this.props.services.ser}</Text>
<Text style={styles.SerContent} >Service is available in the following locations:</Text>
<View style={styles.dir}>
<Text style={styles.Address1}> {this.props.services.Location}:</Text>
<TouchableOpacity onPress={() => Linking.openURL(destUrl)}>
<Text style={styles.underLineText}>Directions</Text>
</TouchableOpacity>
</View>
<View style={styles.dir}>
<Text style={styles.Address1}>{this.props.services.SecondLoc}:</Text>
<TouchableOpacity onPress={() => Linking.openURL(destUrl1)}></TouchableOpacity>
<TouchableOpacity onPress={() => Linking.openURL(destUrl1)}>
<Text style={styles.underLineText}>Directions</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
}
const mapStateToProps = state => {
return {
services: state.serviceSelected
};
};
export default connect(mapStateToProps, actions)(ServiceDetail);
any help will be highly appreciated.

Please try increasing flex to Image and add the position property.
image: {
flex: 1,
height: 200,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
width: 333,
position: 'absolute',
},
Please apply the width of the container and add the position property.
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4F6D7A',
height: 200,
alignSelf:'center'
width: 333,
position: 'relative',
},
you can also edit the layout using flexbox
https://facebook.github.io/react-native/docs/flexbox.html

Related

Flex value for main view causing all of my content to dissapear

I am working on a react native coffee app and trying to create the lay out where I have
the header
the scrollable container holding my coffee
a footer with a text input
a '+' icon to add the coffees to the container
Currently the flex value of my main 'View' is causing my entire app to push to the top of the screen and i have no idea why. I can set the height and width to 100% without flex and i can fill the screen but then i cannot configure my footer properly (+ i know this is bad practice..)
What am i doing wrong with my styles?
const Main = () => {
return(
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}> List of Coffee </Text>
</View>
<ScrollView styles={styles.scrollContainer}>
</ScrollView>
<View styles={styles.footer}>
<TextInput
styles={styles.textInput}
placeholder="add your latest coffee here"
placeholderTextColor="#EEE">
</TextInput>
</View>
<TouchableOpacity style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);};
const styles = StyleSheet.create({
container: {
flex:1,
flexDirection:"column",
backgroundColor: 'grey',
},
footer: {
position: 'absolute',
bottom: 10,
left: 10,
right: 10,
backgroundColor: 'white',
zIndex: 9,
},
header: {
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 10,
borderBottomColor: 'yellow' ,
paddingTop: 20,
},
headerText: {
color: 'white',
fontSize: 36,
padding: 26,
fontWeight: "500",
fontFamily: 'Helvetica',
},
scrollContainer:{
marginBottom: 100,
},
textInput: {
alignSelf: 'stretch',
color: 'black',
padding:20,
backgroundColor: 'black',
borderTopWidth: 2,
borderTopColor: 'black',
fontSize: 32,
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 100,
backgroundColor: 'black',
width: 80,
height: 80,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
} ,
addButtonText:{
color: '#FFD700',
fontSize: 36,
fontWeight: '700',
},
});
export default Main;

I can't get text where it should go in react native

Hi I'm building an app for IOS and Android with react Native, and I'm a newbie this is my first app, and I think I'm not too bad, but I have a UI that is only a supermarket list, but I have the head ready but I need place the below the image , I made a new View but it comes out in the middle of the screen. Can you explain to me why it is not shown where to go, thanks.
Can you explain to me why? Thanks I share codes
enter image description here
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<View style={styles.container}expoex>
<View style={styles.header}>
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
</View>
<View style={styles.menu}>
<Image source={require('./assets/menu3.png')} />
<Image source={require('./assets/menu2.png')} />
<Image source={require('./assets/menu5.png')} />
<Image source={require('./assets/menu1.png')} />
<Image source={require('./assets/menu4.png')} />
</View>
</View>
<View style={styles.textNomList}>
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop:62,
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'flex-start',
height: 145,
marginVertical: 10,
},
imageContainer: {
alignItems: 'center',
justifyContent: 'center',
marginLeft:5,
height: 145,
},
logo: {
width: 100,
height: 140,
},
menu: {
flex:1,
flexDirection:'row',
justifyContent:'space-between',
marginHorizontal: 20,
marginTop:15,
height:145,
},
textNomList: {
flex:1,
alignItems:'flex-start',
justifyContent:'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
the result of this code is
enter image description here
I only can see some styling issues, check out below, edit it as required
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop: 62,
// flex: 1,
flexDirection: 'row',
// justifyContent: 'center',
// alignItems: 'flex-start',
// height: 145,
// marginVertical: 10,
},
imageContainer: {
// alignItems: 'center',
// justifyContent: 'center',
marginLeft: 5,
height: 145,
},
logo: {
width: 100,
height: 140,
backgroundColor:'fff'
},
menu: {
// flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 15,
height: 145,
},
textNomList: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
You should put your text in the same View that is wrapping your image and then style it appropriately.
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
I am not good at styling but it looks like your app should look decent with how the styles are at the current moment.

Can a normal page become a Header?

I've got a page that I created and I would like to use it as a header.
The issue is that it would push any other page/text that I use to the bottom of the page.
Any solution? I'm new to react native.
Here is my code :
import React from 'react';
import { Image, StyleSheet, Button, View, SafeAreaView, Text, Alert, TouchableOpacity } from 'react-native';
import logo from '../../../assets/logo.png';
export default function App() {
return (
<View style={styles.container}>
<View style = {styles.backgroundContainer}>
<Image source={logo} style={{ width: 190, height: 40 }} />
<Text style={styles.text1}>|</Text>
<Text style={styles.text2}>Welcome to the Team</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.text3}>A LA CARTE</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button2}>
<Text style={styles.text3}>PLAY</Text>
</TouchableOpacity>
<Text style={styles.text21}>Teams</Text>
<Text style={styles.text0}>|</Text>
<Text style={styles.text22}>Projets</Text>
<Text style={styles.text00}>|</Text>
<Text style={styles.text23}>Glossaire</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
backgroundContainer: {
position: 'absolute',
top: 0,
bottom: 0,
left: 10,
right: 0,
},
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
marginTop: 12,
},
code: {
marginTop: 12,
padding: 12,
borderRadius: 8,
color: "#666",
backgroundColor: "#eaeaea"
},
button: {
backgroundColor: "#61C3D7",
position:'absolute',
justifyContent: "center",
alignItems: "center",
borderRadius:3,
height:45,
padding: 15,
width:120,
top:-10,
right:170
},
button2: {
backgroundColor: "#26AA90",
position:'absolute',
justifyContent: "center",
alignItems: "center",
borderRadius:3,
height:45,
padding: 15,
width:120,
top:-10,
right:20
},
text0: {
position: 'absolute',
color:'#D3D3D3',
fontSize: 24,
fontWeight: 300,//Semibold
right: 405
},
text00: {
position: 'absolute',
color:'#D3D3D3',
fontSize: 24,
fontWeight: 300,//Semibold
right: 495
},
text1: {
position: 'absolute',
fontSize: 24,
fontWeight: 300,//Semibold
left: 190
},
text2: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
left: 210
},
text21: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
right: 525
},
text22: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
right: 425
},
text23: {
position: 'absolute',
fontSize: 17,
fontWeight: 600,//Semibold
top: 5,
right: 325
},
text3: {
fontSize: 17,
textAlign: 'center',
fontWeight: 400,
color:'#FFFFFF',
top: 5,
width: 100,
left: 210}
});
This is the index.tsx of my Header directory and I called it with a in my App.tsx.
I wish to make it so that I can call this Header in each of my pages and not have to use "position: 'absolute'" in each of my styles each time I'm using it.

Centering content in the middle of the screen in a react native application

i want to center my view at the center of the screen but its unable am using justifyContent: 'center',
alignItems: 'center', but its all unable to put the contents at the middle of the screen i want the content to go to middle of the screen
i want the buttons and the inputs all to be at the middle of the screen .
i have tried to align but its unable to
import React, {useState, useEffect, useContext} from 'react';
import UserContext from './useContextStore';
import {
Text,
View,
Button,
TextInput,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
import auth from '#react-native-firebase/auth';
import DataViewDoc from './view';
const PhoneInput = ({navigation}) => {
const [number, setNumber] = useState({number: ''});
const [value, loadedVal] = useState({value: true});
const [screenDaetail, setScreenDaetail] = useState(true);
const [waiting, setwaiting] = useState(false);
const [code, setCode] = useState({code: '', number: ''});
const [confirm, setConfirm] = useState(null);
const [codee, setCodee] = useState('');
// let num;
const getNumber = (val) => {
setNumber({number: val});
};
const getCode = (val) => {
setCode({code: val, number: number.number});
};
//firebase**************************************************************************
async function signInWithPhoneNumber(phoneNumber) {
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
console.log('confirmation code is ', confirmation);
setConfirm(confirmation);
}
async function confirmCode() {
try {
await confirm.confirm(codee).then(() => {
console.log('logged in');
// setScreenDaetail(!screenDaetail);
navigation.navigate('codeForma');
});
} catch (error) {
console.log('Invalid code.');
}
}
return (
<View styles={style.container}>
{confirm ? (
<>
<View styles={style.content}>
<Text style={style.TextStyle1}>Enter Valid Code </Text>
</View>
<View style={style.viewForText}>
<TextInput
style={style.textinput}
onChangeText={(text) => setCodee(text)}
secureTextEntry={true}
maxLength={13}
value={codee}
/>
</View>
<View style={style.viewForSend}>
<TouchableOpacity
style={style.SubmitButtonStyle}
activeOpacity={0.1}
onPress={() => {
// sendPhoneCodeTwillio();
confirmCode();
}}>
<Text style={style.TextStyle}> SEND</Text>
</TouchableOpacity>
<TouchableOpacity
style={style.SubmitButtonStyle2}
activeOpacity={0.1}
onPress={() => {
// sendPhoneTwilio();
setConfirm(null);
}}>
<Text style={style.TextStyle}> Back </Text>
</TouchableOpacity>
</View>
</>
) : (
<>
<View styles={style.content}>
<Text style={style.TextStyle1}>Enter Phone number </Text>
</View>
<View style={style.viewForText}>
<TextInput
style={style.textinput}
onChangeText={(text) => {
getNumber(text);
}}
maxLength={13}
value={number.number}
/>
</View>
<View style={style.viewForSend}>
<TouchableOpacity
style={style.SubmitButtonStyle}
activeOpacity={0.1}
onPress={() => {
signInWithPhoneNumber(number.number);
}}>
<Text style={style.TextStyle}> SEND </Text>
</TouchableOpacity>
<TouchableOpacity
style={style.SubmitButtonStyle2}
activeOpacity={0.1}
onPress={() => {
signInWithPhoneNumber(number.number);
}}>
<Text style={style.TextStyle}> RESEND </Text>
</TouchableOpacity>
</View>
</>
)}
</View>
);
};
const style = StyleSheet.create({
container: {
flex: 1,
// paddingBottom: Platform.OS === 'android' ? 50 : 0,
justifyContent: 'center',
alignItems: 'center',
},
textinput: {
margin: 25,
borderColor: '#7a42f4',
borderWidth: 5,
borderRadius: 35,
color: 'black',
textAlign: 'center',
fontFamily: 'Cochin',
fontSize: 20,
fontWeight: 'bold',
},
viewForText: {width: 250, alignSelf: 'center'},
viewForSend: {
width: 400,
// alignSelf: 'baseline',
borderRadius: 20,
margin: 10,
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'center',
},
content: {
// justifyContent: 'center',
// // alignItems: 'flex-start',
flex: 2,
justifyContent: 'flex-end',
marginBottom: 36,
},
topTierblack: {
backgroundColor: 'black',
borderRadius: 100,
width: 300,
marginLeft: 40,
opacity: 0.5,
},
topTierRed: {
backgroundColor: 'red',
borderRadius: 100,
width: 300,
marginLeft: 40,
},
topTierGreen: {
backgroundColor: 'green',
borderRadius: 100,
width: 300,
marginLeft: 40,
opacity: 0.5,
},
viewForSend2: {
width: 200,
alignSelf: 'flex-end',
borderRadius: 20,
// margin: 10,
},
buttonContainer: {
width: '40%',
alignSelf: 'center',
marginVertical: 30,
color: 'red',
borderRadius: 10,
},
SubmitButtonStyle: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginLeft: 30,
marginRight: 30,
backgroundColor: '#00BCD4',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
shadowOpacity: 0.5,
shadowColor: 'blue',
height: 50,
width: 100,
},
SubmitButtonStyle2: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginLeft: 30,
marginRight: 30,
backgroundColor: 'black',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
shadowOpacity: 0.5,
shadowColor: 'blue',
height: 50,
width: 100,
},
TextStyle: {
color: '#fff',
textAlign: 'center',
},
TextStyle1: {
color: 'black',
textAlign: 'center',
fontFamily: 'Cochin',
fontSize: 20,
fontWeight: 'bold',
},
});
export default PhoneInput;
Remove the marginRight from SubmitButtonStyle and the marginLeft from SubmitButtonStyle2 and you should be fine.

react native video component is not showing?

Problem:
I have created a react component which is including a video that uses react native video library. But unfortunately, it is not showing a video component. This is how my code is.
import React, {createRef, useState} from 'react';
import {
View,
Image,
TouchableOpacity,
TouchableWithoutFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import AppText from '_components/appText';
import Video, {
OnSeekData,
OnLoadData,
OnProgressData,
} from 'react-native-video';
import {strings} from '_translations/i18n';
import PlayerControls from '_components/playerControls';
const navigateToCameraView = (navigation) => {
navigation.navigate('videorecording');
};
const showControls = (state, setState) => {
state.showControls
? setState({...state, showControls: false})
: setState({...state, showControls: true});
};
const playVideo = (state, setState) => {
console.log('Hiii>>>>>>>>');
setState({...state, showControls: false, play: true});
};
const VideoPreview = (props) => {
const {styles, navigation, fileName} = props;
const [state, setState] = useState({
fullscreen: false,
play: false,
currentTime: 0,
duration: 0,
showControls: true,
});
const player = createRef();
return (
<View style={styles.previewInnerContainer}>
{fileName ? (
<>
<View style={styles.videoContainer}>
<View style={styles.videoInnerContainer}>
<TouchableWithoutFeedback
onPress={() => showControls(state, setState)}>
<View>
<Video
source={{uri: fileName}}
controls={false}
style={styles.backgroundVideo}
ref={player}
resizeMode={'contain'}
paused={!state.play}
/>
{state.showControls && (
<View style={styles.controlsOverlay}>
<View style={styles.wrapper}>
<TouchableOpacity
style={styles.touchable}
onPress={() => playVideo(state, setState)}>
<Image
source={require('_assets/img/play1.png')}
resizeMode="center"
style={styles.playIcon}
/>
</TouchableOpacity>
</View>
</View>
)}
</View>
</TouchableWithoutFeedback>
</View>
</View>
<View style={styles.videoBottomText}>
<TouchableOpacity onPress={() => navigateToCameraView(navigation)}>
<View style={styles.updateAgainContainer}>
<Icon name="reload1" style={styles.reloadIcon} />
<AppText styles={styles.reloadText}>
{strings('assetsment.reload')}
</AppText>
</View>
</TouchableOpacity>
</View>
</>
) : (
<>
<TouchableOpacity onPress={() => navigateToCameraView(navigation)}>
<Image
source={require('_assets/img/cmerap.png')}
resizeMode="center"
style={styles.camPImage}
/>
</TouchableOpacity>
<AppText styles={styles.camPText}>Tap to capture video</AppText>
</>
)}
</View>
);
};
export default VideoPreview;
I have embedded it in another component like this.
<View style={styles.questionsInnerContainer}>
<View style={styles.questionTitleView}>
<AppText styles={styles.questionTitle}>
{strings('assetsment.question', {id: question.questionId})}
</AppText>
</View>
<View style={styles.questionTextContainer}>
<AppText styles={styles.questionText}>{questionTitle}</AppText>
</View>
</View>
<View style={styles.previewContainer}>
<VideoPreview
styles={styles}
navigation={navigation}
fileName={fileName}
/>
</View>
This is my styling sheet.
patientView: {
flex: 1,
backgroundColor: '#ffffff',
flexDirection: 'column',
},
top: {
height: '10%',
},
updateAgainContainer: {
flexDirection: 'row',
// backgroundColor: 'red',
},
reloadIcon: {
fontSize: normalize(15),
color: '#417505',
fontWeight: '600',
textAlign: 'center',
},
questionsContainer: {
height: '78%',
// backgroundColor: '#f2f2f2',
// elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.8,
shadowRadius: 8,
flex: 1,
},
hr: {
marginTop: '5%',
borderBottomColor: '#c3c3c3',
borderBottomWidth: 2.0,
marginRight: 30,
marginLeft: 30,
justifyContent: 'center',
},
bottom: {
height: '7%',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomContainerText: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '500',
},
bottomLinkText: {
fontSize: normalize(13),
color: '#484848',
borderBottomWidth: 2,
borderBottomColor: '#c3c3c3',
},
imageContainer: {
height: '30%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: '25%',
},
questionsInnerContainer: {
height: '30%',
paddingRight: '5%',
paddingLeft: '3%',
paddingTop: '5%',
},
btnContainer: {
paddingLeft: '5%',
paddingRight: '5%',
marginBottom: '12%',
justifyContent: 'center',
},
emtyView: {
height: '5%',
},
img: {
width: '50%',
resizeMode: 'contain',
},
questionTitleView: {
paddingBottom: '2%',
position: 'relative',
},
questionTitle: {
color: '#444444',
fontSize: normalize(11),
fontWeight: '600',
},
questionTextContainer: {
backgroundColor: '#d1e5ff',
paddingTop: '6%',
paddingBottom: '6%',
paddingLeft: '4%',
borderRadius: 10,
},
questionText: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '700',
},
questionsLodder: {
width: '20%',
height: '20%',
alignSelf: 'center',
justifyContent: 'center',
marginTop: '50%',
},
previewContainer: {
height: '50%',
marginLeft: '10%',
marginRight: '10%',
// alignItems: 'center',
marginBottom: '2%',
},
previewInnerContainer: {
flex: 1,
},
camPImage: {
alignSelf: 'center',
marginTop: '-15%',
},
camPText: {
color: '#444444',
fontSize: normalize(13),
fontWeight: '600',
marginTop: '-25%',
textAlign: 'center',
},
answersContainer: {
flex: 1,
paddingLeft: '8%',
paddingRight: '8%',
},
answerContentContainer: {
flexDirection: 'row',
paddingBottom: '5%',
paddingTop: '2%',
paddingLeft: '5%',
paddingRight: '5%',
},
answerTextContainer: {
flex: 1,
},
sendButton: {
flex: 1,
backgroundColor: '#3e92ff',
paddingTop: 10,
paddingBottom: 10,
alignItems: 'center',
borderRadius: 50,
marginTop: 25,
marginBottom: 20,
justifyContent: 'center',
},
sendButtonText: {
fontFamily: 'Montserrat-Medium',
color: '#ffffff',
fontWeight: '300',
fontSize: normalize(15),
textAlign: 'center',
letterSpacing: 2,
},
bimage: {
width: 25,
height: 25,
},
toggle: {
transform: [{scaleX: 1.6}, {scaleY: 1.6}],
elevation: 90,
shadowColor: '#000000',
shadowOffset: {width: 0, height: 3},
shadowOpacity: 0.9,
shadowRadius: 50,
},
answerText: {
color: '#444444',
fontWeight: '600',
fontSize: normalize(13),
},
backgroundVideo: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
videoContainer: {
height: '70%',
},
videoInnerContainer: {
flex: 1,
backgroundColor: '#b8b8b8',
},
videoBottomText: {
height: '20%',
alignItems: 'center',
justifyContent: 'center',
},
reloadText: {
textAlign: 'center',
marginLeft: '5%',
color: '#417505',
fontWeight: '600',
fontSize: normalize(14),
},
reloadTextContainer: {
flex: 1,
},
controlOverlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'space-between',
alignItems: 'center',
},
wrapper: {
paddingHorizontal: 5,
marginTop: '28%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
flex: 3,
},
touchable: {
padding: 5,
},
playIcon: {
// backgroundColor: '#b8b8b8',
},
I tried a lot to find out what is wrong with this. But i was unable to do so. Can someone help me to find out a solution to this problem ?. If someone can help me it is really really appreciated as I am completely help less with this.Thank you

Resources