Develop Reference

How can i add border radius to my image fron each side without effecting the text?

How can I add a border radius to my image from each side without affecting the username text? I want to make the image feel good by adding a border radius from each side like yt shorts so what I did I gave it borderTopLeftRadius borderTopRightRadius 30 each same with the bottom but then it makes the username text looks bad can you help me with that? I am using react native
import React from 'react';
import { StyleSheet, Text, View, Image, ActivityIndicator } from 'react-native';
import { useState } from 'react';
const PostCard = ({ username, profile_image, postImage }) => {
const [isLoading, setIsLoading] = useState(true);
return (
<View style={styles.container}>
<View style={styles.c1}>
<Image
source={{ uri: profile_image }}
style={styles.profilepic}
onLoadEnd={() => setIsLoading(false)}
/>
{isLoading && <ActivityIndicator style={styles.spinner} />}
<Text style={styles.username}>{username}</Text>
</View>
<Image
source={{ uri: postImage }}
style={styles.image} // this is the image that i want to style
onLoadEnd={() => setIsLoading(false)}
/>
{isLoading && <ActivityIndicator style={styles.spinner} />}
</View>
);
};
export default PostCard
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
// height: 350,
borderRadius: 10,
marginVertical: 10,
overflow: 'hidden',
borderColor: 'white',
borderWidth: 1,
},
c1: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
padding: 10,
backgroundColor: 'black',
},
profilepic: {
width: 30,
height: 30,
borderRadius: 30,
borderColor: 'white',
borderWidth: 1,
},
username: {
color: 'white',
marginLeft: 10,
fontSize: 17,
fontWeight: 'bold',
},
image: {
width: '130%',
aspectRatio: 1,
}
})

React Native, Height is being auto adjusted even when defined

Im new to this framework, So this is the code:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { MainLogo } from '../../logos/mainLogo';
import { TextInput } from "react-native";
export function Home() {
return (
<SafeAreaView>
<View style={styles.firstBackGround}>
<MainLogo/>
<Text style={{fontSize:25,fontWeight:'bold',color:'rgb(108,
150, 232)',}}>LIBRARY</Text>
</View>
<TextInput placeholder='Search Song or Artist' style=
{styles.secondBackGround} placeholderTextColor="#6b7eb1" >
</TextInput>
<Text style={styles.recommendedText}>Recommended</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create(
{
container: {
},
firstBackGround: {
flexDirection:'row',
alignItems:'center',
flex:0,
},
secondBackGround:{
backgroundColor: '#3f4d7e',
width:'83%',
marginTop:10,
height:'17%',
borderRadius:20,
flex:0,
marginLeft:'auto',
marginRight:'auto',
paddingLeft: 20,
},
recommendedText:{
fontSize:17,
flex:0,
flexDirection:'row',
fontWeight:'bold',
color:'rgb(108, 150, 232)',
marginLeft:20,
marginTop:100,
}
});
here is the image of result:
the more i increase the top margin for recommended text, it auto changes the input field height. I solved this problem by mistake between First View and text input but i cant do it again between text input and Text(recommended)

the height is increasing because you gave it in % and also flex:0 has no impact.
use like this
import React from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { TextInput } from "react-native";
const { width } = Dimensions.get('window')
export default function SettingsScreen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.firstBackGround}>
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'rgb(108,150, 232)', }}>LIBRARY</Text>
</View>
<TextInput placeholder='Search Song or Artist' style={styles.secondBackGround} placeholderTextColor="#6b7eb1" />
<Text style={styles.recommendedText}>Recommended</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create(
{
container: {
},
firstBackGround: {
flexDirection: 'row',
alignItems: 'center',
flex: 0,
},
secondBackGround: {
backgroundColor: '#3f4d7e',
width: '83%',
marginTop: 10,
// height: '17%',
height: width / 7.5,
borderRadius: 20,
// flex: 0,
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: 20,
},
recommendedText: {
fontSize: 17,
// flex: 0,
flexDirection: 'row',
fontWeight: 'bold',
color: 'rgb(108, 150, 232)',
marginLeft: 20,
marginTop: 200,
backgroundColor: 'red'
}
});
if you want to make design responsive then
step:1 - get a scale of figma or xd screen (eg 375 width)
step:2 -say your height of a view is 50 then divide 375/50 = 7.5
step:3 - use height width/7.5 ( width of your current window, get this by using Dimensions API)
another way is use this library react-native-size-matters

Camera not displaying after reloading app or running npx react-native start for the 2nd time

I have implemented tensor-flow camera functionalities for pose detection on a website and then hosted it on netlify. Link: https://uactivsite-mobile.netlify.app/.Also github link of the same: https://github.com/viveksgonal/uactivsite/blob/main/src/App.js
I am using this as webview on react-native app. The first time the app builds perfectly and the camera starts. But whenever I try to reload it or run npx react-native start the second time, the camera never opens.
If anyone knows where I'm going wrong, it would be pleasure if you provide the solution. Thank you.
Code is attached below for the react-native app part:
/* eslint-disable react-native/no-inline-styles */
import React, { useRef, useState } from 'react';
const exercises = [
{
name: 'High Knees',
total: 20,
index: 0
},
{
name: 'Jumping Jacks',
total: 25,
index: 1
},
{
name: 'Squats',
total: 20,
index: 2
},
]
import WebView from 'react-native-webview'
import {
View,
StyleSheet,
Text,
Image,
TouchableWithoutFeedback,
Modal
} from 'react-native';
import { useNavigation } from '#react-navigation/native';
const ExerciseCamera = () => {
const webviewRef = useRef(null)
const navigation = useNavigation();
const [speed, setSpeed] = useState(0)
const [reps, setReps] = useState(0)
const ex = 1
function getInjectableJSMessage(message) {
return `
(function() {
window.dispatchEvent(new MessageEvent('message', {
data: ${JSON.stringify(message)}
}));
})();
`;
}
function onMessage(data) {
let val = JSON.parse(data.nativeEvent.data)
if (val.type === 'reps') {
setReps(val.data.rep)
if (val.data.speed !== 0) {
setSpeed(val.data.speed)
}
}
else if (val.type === 'completed') {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}
else {
console.log(val.data.rep)
}
}
function sendDataToWebView(msg) {
webviewRef.current.injectJavaScript(
getInjectableJSMessage(msg)
);
}
return (
<View style={styles.container}>
<Modal
transparent={true}
visible={true}
>
<View style={styles.top_container}>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}}>
<Image
style={styles.icons_container}
source={require('../../Assets/play.png')}
/>
</TouchableWithoutFeedback>
<View style={styles.exercise_name_container}>
<Text style={styles.exercise_name}>Side lunges</Text>
</View>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', { screen: 'dailychallange' });
}}>
<View style={styles.icons_container}>
<Image
style={styles.icon}
source={require('../../Assets/close.png')}
/>
</View>
</TouchableWithoutFeedback>
</View>
<View style={styles.bottom_container}>
<View style={styles.timer_container}>
<Text style={styles.timer_text}>02:47</Text>
</View>
{reps > 0 ? (
<View
style={[
styles.number_container,
{ justifyContent: speed > 0 ? 'space-between' : 'center' },
]}>
{speed > 0 ? <Text style={styles.number}>{speed} RS</Text> : null}
<Text style={styles.number}>{reps}/{exercises[ex].total}</Text>
</View>
) : null}
</View>
</Modal>
<WebView
ref={webviewRef}
mediaPlaybackRequiresUserAction={false}
source={{ uri: 'https://uactivsite-mobile.netlify.app/' }}
scalesPageToFit={false}
mixedContentMode="compatibility"
onMessage={onMessage}
onLoad={event => {
sendDataToWebView({
data: exercises[ex],
type: 'exercise'
})
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
preview: {
flex: 1,
},
top_container: {
zIndex: 1,
position: 'absolute',
top: 43,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
},
bottom_container: {
zIndex: 1,
position: 'absolute',
bottom: 0,
width: '100%',
},
number: { color: 'white', fontSize: 28 },
exercise_name_container: {
height: 40,
width: 155,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: 'rgba(255,255,255,0.2)',
},
number_container: {
height: 62,
backgroundColor: 'black',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 19,
},
timer_container: {
width: '100%',
height: 78,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: 'rgba(255,255,255,0.45)',
alignItems: 'center',
},
timer_text: { color: 'black', fontSize: 48, fontFamily: 'Poppins-Bold' },
icons_container: {
height: 40,
width: 40,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 50,
backgroundColor: 'rgba(255,255,255,0.8)',
},
icon: { width: 16, height: 16, resizeMode: 'contain' },
exercise_name: { color: 'black', fontFamily: 'Poppins-SemiBold', fontSize: 23 },
});
export default ExerciseCamera;

React Native Maps error using newLatLngBounds Map size can't be 0. Code runs fine on iOS, appears to be android specific

I am attempting to run a map on my app. This code works perfectly on iOS, but throws the above error on Android alone. I have tried troubleshooting with current online resources, but they are either older, or they are mainly for "class" format, while my code is written using hooks.
The full error is:
Error using newLatLngBounds (LatLngBounds, int): Map size can't be 0. Most likely, layout has not yet occured for the map view. Either eait until layout has occurred or use newLatLngBounds(LatLngBounds, int, int, int) which allows you to specify the map's dimensions.
Below is my code,
import React, { useState, useEffect, Component }from "react";
import {ActivityIndicator, Alert, BackHandler, Button, Dimensions, Platform, SafeAreaView, StyleSheet, Text, TouchableOpacity, ScrollView, View,} from "react-native";
import MapView, { Marker, Callout, Polyline, PROVIDER_GOOGLE, Heatmap } from "react-native-maps";
import Modal from 'react-native-modal';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import * as Localization from 'expo-localization'
import { useFocusEffect } from '#react-navigation/native'
import { Permissions , Request } from 'expo-permissions'
import * as Location from 'expo-location'
function Locator({navigation, route}) {
const [user_latitude, setUserLatitude] = useState(0)
const [user_longitude, setUserLongitude] = useState(0)
const [position_error, setPositionError] = useState(null)
const [ isLoading, setIsLoading ] = useState(true)
const [ location, setLocation ] = useState(null);
const renderLoading = () => {
if (isLoading) {
return (
<View style = {{justifyContent: 'center', backgroundColor: '#d3d3d3', height: height, width: width}}>
<ActivityIndicator
color = 'black'
size = 'large'
animated = {false}
/>
<Text style = { styles.text }>Locating</Text>
</View>
);
}else {
return null;
}
}
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', () => true)
return () =>
BackHandler.removeEventListener('hardwareBackPress', () => true)
},
[]
)
useFocusEffect(
React.useCallback(()=> {
let isActive = true;
const fetchGeoPosition = () => {
navigator.geolocation.getCurrentPosition(
position => {
if (isActive){
setUserLatitude(position.coords.latitude);
setUserLongitude(position.coords.longitude);
setPositionError(null);
console.log('Location Accessed')
}
setIsLoading(false)
},
error => isActive && setPositionError(error.message),
{enableHighAccuracy: true, timeout: 0, maximumAge: 1000}
);
}
const permission_get = async () => {
if (Platform.OS === 'android' && !Constants.isDevice) {
setErrorMsg(
'Oops, this will not work on Snack in an Android emulator. Try it on your device!'
);
return;
}
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
console.log('Not permitted')
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
}
permission_get()
fetchGeoPosition()
return () =>{
isActive = false
console.log('Location Severed')
}
},
[],
),
)
return(
<View style = {styles.container}>
{(renderLoading())}
<View style = {styles.header}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region= {{
latitude: user_latitude,
longitude: user_longitude,
latitudeDelta: 0.1451,
longitudeDelta: 0.1451
}}>
<Marker
coordinate={
{latitude: user_latitude,
longitude: user_longitude,
error: position_error,
}}
>
</Marker>
</MapView>
</View>
<View style = {styles.footer}>
<View style = {styles.buttonView}>
<TouchableOpacity
onPress= { null }
style = {styles.signIn}
>
<Text style = {styles.buttonText}>Cancel</Text>
</TouchableOpacity>
</View>
<View style = {styles.buttonView}>
<TouchableOpacity
onPress = { null }
style = {styles.signIn}
>
<Text style = {styles.buttonText}>Continue</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
export {Locator};
const {height}= Dimensions.get("screen");
const { width } = Dimensions.get("screen")
const styles = StyleSheet.create({
container: {
flex: 100,
flexDirection: 'column',
},
header:{
flex: 90,
width: width,
},
map: {
...StyleSheet.absoluteFillObject,
},
middle: {
width: '100%',
flex: 15,
borderColor: '#d3d3d3',
borderWidth: 5,
backgroundColor: '#d3d3d3',
},
footer: {
width: width,
flex: 10,
backgroundColor: '#d3d3d3',
justifyContent: 'space-evenly',
flexDirection: 'row',
},
text: {
textAlign: 'center',
color: 'black',
},
button: {
fontSize: height*0.03,
width: width*0.45,
textAlign: 'center',
height: height*0.05,
color: '#d3d3d3',
fontWeight: 'bold',
borderRadius: 20,
justifyContent: 'center'
},
buttonText:{
textAlign: 'center',
fontWeight: 'bold',
color: 'black',
fontSize: height*0.025
},
textSign: {
color: '#fff',
fontWeight: 'bold',
fontSize: 20,
width: '100%',
paddingTop: 20,
textAlign: 'center',
},
modal: {
backgroundColor: '#d3d3d3',
alignItems: 'center',
width: '100%',
height: '20%',
paddingRight: 20,
borderRadius: 10,
color: 'black',
},
searchBox:{
top: 0,
position: 'absolute',
width: width,
},
signIn: {
width: width*0.45,
height: height*0.055,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 50,
flexDirection: 'row',
fontSize: height*0.02,
borderColor: 'black',
backgroundColor: '#fff',
marginTop: height*0.01,
},
buttonView:{
alignItems: 'center',
marginTop: height*0.001,
},
});

While
map: {
...StyleSheet.absoluteFillObject,
},
is an acceptable format for iOS, Android requires you to specify the Map's dimensions. The error above can be fixed by doing something as simple as:
map: {
...StyleSheet.absoluteFillObject,
height: height*0.8
},

How to keep the memory of app after totally closing the app in React Native

I am using react native to build an app and the only problem i am having is that i have a progress bar that keeps track of the users progress but when I close the app completely and open it back up everything resets to its original data. How do I make it so it will keep the data when they close the app?
Not sure how to add in the AsyncStorage
Here is my code:
'use strict';
var React = require('react-native');
var ProgressBar = require('react-native-progress-bar');
var {
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var PROGRESS = 0;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
},
button: {
alignSelf: 'center',
marginTop: 50,
width: 100,
height: 50,
backgroundColor: '#0059FF',
borderRadius: 8,
borderWidth: 2,
borderColor: '#0059FF'
},
buttonClear: {
alignSelf: 'center',
marginTop: 10,
width: 100,
height: 50,
backgroundColor: '#3B3A3A',
borderRadius: 8,
borderWidth: 2,
borderColor: '#3B3A3A'
},
buttonText: {
fontSize: 18,
textAlign: 'center',
lineHeight: 33,
color: '#FFF',
}
});
class BasicStorageExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: PROGRESS
};
}
onButtonPress() {
this.setState({
progress: PROGRESS += 0.2
});
}
onButtonClearPress() {
PROGRESS = 0;
this.setState({
progress: 0
});
}
render() {
return (
<View style={styles.container}>
<ProgressBar
fillStyle={{}}
backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
style={{marginTop: 10, width: 300}}
progress={this.state.progress} />
<TouchableHighlight
style={styles.button}
underlayColor='#002C7F'
onPress={this.onButtonPress.bind(this)}>
<Text style={styles.buttonText}>Done</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.buttonClear}
underlayColor='#002C7F'
onPress={this.onButtonClearPress.bind(this)}>
<Text style={styles.buttonText}>Clear</Text>
</TouchableHighlight>
</View>
);
}
};
AppRegistry.registerComponent('BasicStorageExample', () => BasicStorageExample);

you can try taking a look at this article by Nic Raboy. It has a video demonstration as well as example code.
https://blog.nraboy.com/2015/09/saving-data-in-your-react-native-mobile-application/
Here is some example code (from the article) that demonstrates saving your data with async storage. Cheers!
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
AsyncStorage,
} = React;
var ReactProject = React.createClass({
componentDidMount: function() {
AsyncStorage.getItem("myKey").then((value) => {
this.setState({"myKey": value});
}).done();
},
getInitialState: function() {
return { };
},
render: function() {
return (
<View style={styles.container}>
<Text style={styles.saved}>
{this.state.myKey}
</Text>
<View>
<TextInput
style={styles.formInput}
onChangeText={(text) => this.saveData(text)}
value="" />
</View>
<Text style={styles.instructions}>
Type something into the text box. It will be saved to
device storage. Next time you open the application, the saved data
will still exist.
</Text>
</View>
);
},
saveData: function(value) {
AsyncStorage.setItem("myKey", value);
this.setState({"myKey": value});
}
});
var styles = StyleSheet.create({
container: {
padding: 30,
flex: 1,
justifyContent: "center",
alignItems: "stretch",
backgroundColor: "#F5FCFF",
},
formInput: {
flex: 1,
height: 26,
fontSize: 13,
borderWidth: 1,
borderColor: "#555555",
},
saved: {
fontSize: 20,
textAlign: "center",
margin: 10,
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5,
marginTop: 5,
},
});
AppRegistry.registerComponent('ReactProject', () => ReactProject);