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
},

React native Animated undefined is not an object (evaluating 'u.stopTracking')

I'm having the following problem: "undefined is not an object (evaluating 'u.stopTracking')".
It happens when on Expo I update a props, I tried to use on componentWillReceiveProps, stopAnimation() and stopTracking(), but I could not.
Link expo: Here
To make the error appear, just click on the image of the central player.
Can someone give me a hand?
App:
import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import { Constants } from 'expo';
import Album from './Album';
import Track from './Track';
const State = ['normal', 'transparent', 'big'];
export default class App extends React.Component {
constructor() {
super();
this.state = {
type: 0,
};
}
render() {
let { type } = this.state;
return (
<View style={styles.container}>
<ImageBackground
source={{
uri:
'https://i.pinimg.com/originals/62/6f/84/626f84c40696c1308a77fd8331e12b3e.jpg',
}}
imageStyle={{ borderRadius: 4 }}
style={{
alignItems: 'center',
justifyContent: 'center',
height: 400,
width: 400,
}}>
<Album
type={State[type]} //normal,transparent,big
title={Track.name}
artist={Track.artists[0].name}
cover={Track.album.images[0].url}
onPress={() => {
type = ++type % 3;
this.setState({ type });
}}
/>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
});
Album:
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ImageBackground,
Animated,
TouchableOpacity,
} from 'react-native';
const size = 40;
export default class Album extends React.Component {
constructor(props) {
super(props);
this.min = size / 4;
this.max = size / 2;
this.heightCenter = new Animated.Value(this.min);
this.heightLateral = new Animated.Value(size / 2);
/*this.state = {
heightCenter: new Animated.Value(this.min),
heightLateral: new Animated.Value(size / 2),
};*/
}
animateBar = (el, value) => {
var newValue = value == this.max ? this.min : this.max;
Animated.timing(el, {
toValue: value,
}).start(() => this.animateBar(el, newValue));
};
onPress = e => {
return this.props.onPress(e);
};
componentDidMount() {
console.log(this.heightCenter)
this.animateBar(this.heightCenter, this.min);
this.animateBar(this.heightLateral, this.max);
}
componentWillReceiveProps(nextProps) {
if (nextProps.type !== this.props.type) {
console.log('componentWillReceiveProps');
//this.state.heightCenter.stopAnimation();
//this.state.heightLateral.stopAnimation();
//Animated.stopTracking();
//Animated.timing(this.heightCenter).stopTracking();
//Animated.timing(this.heightLateral).stopTracking();
/*this.state.heightCenter.stopTracking();
this.state.heightLateral.stopTracking();
this.state.heightCenter.stopAnimation();
this.state.heightLateral.stopAnimation();*/
//this.heightCenter = {};
//this.heightLateral = null;
//this.heightCenter.stopTracking();
//this.heightLateral.stopTracking();
//this.state.heightCenter.stopAnimation();
//this.state.heightLateral.stopAnimation();
console.log(this.heightCenter)
}
}
componentDidUnmount() {
console.log('componentDidUnmount');
//Animated.timing(this.heightCenter).stop();
//Animated.timing(this.heightLateral).stop();
}
componentDidUpdate() {
this.animateBar();
}
render() {
let { type, title, artist, cover } = this.props;
let barWidthCenter = {
height: this.heightCenter,
};
let barWidthLateral = {
height: this.heightLateral,
};
if (type != 'normal' && type != 'transparent' && type != 'big')
type = 'transparent';
let backgroundColor =
type == 'normal' ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)';
let color = type == 'normal' ? '#000' : '#fff';
if (type == 'big')
return (
<TouchableOpacity onPress={() => this.onPress()}>
<View
style={{
alignItems: 'center',
justifyContent: 'center',
}}>
<ImageBackground
source={{
uri: cover,
}}
imageStyle={{ borderRadius: 4 }}
style={{
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'flex-start',
height: 200,
width: 200,
}}>
<View
style={{
borderRadius: 4,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.3)',
padding: 5,
height: 40,
width: 40,
margin: 5,
}}>
<Animated.View
style={[
{
backgroundColor: 'rgba(255,255,255,1)',
width: 5,
borderRadius: 5 / 2,
margin: 2,
},
barWidthLateral,
]}
/>
<Animated.View
style={[
{
backgroundColor: 'rgba(255,255,255,1)',
width: 5,
borderRadius: 5 / 2,
margin: 2,
},
barWidthCenter,
]}
/>
<Animated.View
style={[
{
backgroundColor: 'rgba(255,255,255,1)',
width: 5,
borderRadius: 5 / 2,
margin: 2,
},
barWidthLateral,
]}
/>
</View>
</ImageBackground>
<View style={{ paddingLeft: 12, paddingRight: 12 }}>
<Text style={{ fontWeight: 'bold', color: '#fff' }}>{title}</Text>
<Text style={{ color: '#fff' }}>{artist}</Text>
</View>
</View>
</TouchableOpacity>
);
return (
<TouchableOpacity onPress={() => this.onPress()}>
<View
style={{
backgroundColor: backgroundColor,
flexDirection: 'row',
justifyContent: 'center',
borderRadius: 4,
padding: 4,
}}>
<ImageBackground
source={{
uri: cover,
}}
imageStyle={{ borderRadius: 4 }}
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: size,
width: size,
}}>
<Animated.View
style={[
{
backgroundColor: 'rgba(255,255,255,1)',
width: 5,
borderRadius: 5 / 2,
margin: 2,
},
barWidthLateral,
]}
/>
<Animated.View
style={[
{
backgroundColor: 'rgba(255,255,255,1)',
width: 5,
borderRadius: 5 / 2,
margin: 2,
},
barWidthCenter,
]}
/>
<Animated.View
style={[
{
backgroundColor: 'rgba(255,255,255,1)',
width: 5,
borderRadius: 5 / 2,
margin: 2,
},
barWidthLateral,
]}
/>
</ImageBackground>
<View style={{ paddingLeft: 12, paddingRight: 12 }}>
<Text style={{ fontWeight: 'bold', color }}>{title}</Text>
<Text style={{ color }}>{artist}</Text>
</View>
</View>
</TouchableOpacity>
);
}
}

I see it's been a while you asked this question. I don't know how you solved this problem but I've had the same error:
"undefined is not an object (evaluating 'u.stopTracking')"
because of the code here:
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
elementPositionX: 0,
target: null,
marginLeft: new Animated.Value(0),
};
It was happening because I had put the Animated Value in the state. It should have defined out of the state, as a property of the component class, like this:
export default class App extends React.Component {
constructor(props) {
super(props);
this.marginLeft= new Animated.Value(0);
this.state = {
elementPositionX: 0,
target: null,
};
The documentation about Animated API is so poor, so I am not sure why but this solved my problem.
EDIT:
I have managed to place it in the state somehow, and it works without giving the former error. However, I need to use this code to change the animated value: this.state.marginLeft2.setValue(amount); and this is actually changing the state directly - without using .setState(). It doesn't seem good to me.