Develop Reference

dynamic customizable button in react native

i am trying to make a selectable button design by passing the "PRIMARY" or "TERTIARY" to type. i think there is a problem in the "styles['container_${type}']" in line 7 but i cant figure it out
import { View, StyleSheet, Image ,Text, Pressable} from 'react-native';
function CustomButton({onPress, text, type}) {
return (
<Pressable
onPress={onPress}
style={[styles.container, styles['container_${type}']]}>
<Text style={[styles.text, styles['text_${type}']]} >{text}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
container:{
width: '100%',
padding: 15,
alignItems: 'center',
borderRadius: 30,
marginVertical: 25,
},
container_PRIMARY:{
backgroundColor: '#fde17d',
},
container_TERTIARY:{
backgroundColor: 'pink',
},
text: {
fontWeight: 'bold',
color: 'white',
},
text_TERTIARY :{
color: 'gray',
}
})
export default CustomButton;

Try this,
import { View, StyleSheet, Image ,Text, Pressable} from 'react-native';
function CustomButton({onPress, text, type}) {
const stylesheet = type == 'PRIMARY' ? 'container_PRIMARY' : 'container_TERNIARY';
return (
<Pressable
onPress={onPress}
style={[styles.container, {...stylesheet}]}>
<Text style={[styles.text, styles['text_${type}']]} >{text}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
container:{
width: '100%',
padding: 15,
alignItems: 'center',
borderRadius: 30,
marginVertical: 25,
},
container_PRIMARY:{
backgroundColor: '#fde17d',
},
container_TERTIARY:{
backgroundColor: 'pink',
},
text: {
fontWeight: 'bold',
color: 'white',
},
text_TERTIARY :{
color: 'gray',
}
})
export default CustomButton;

Use `` for template literals not ' '.

Recharts - Tooltip for individual Bar in a Bar Chart in react

So I have a bar chart having three bars and I wanted to show tooltip for each bar. Currently it shows all bars tooltip as one. Her is my code.
import React, { memo } from "react";
import {
Bar,
BarChart,
CartesianGrid,
LabelList,
Rectangle,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";
import { makeStyles } from "#material-ui/core/styles";
import ChartWrapper from "../chartParent/chartWrapper/ChartWrapper";
const Categories = [
{ category: "great", fill: "#00D063" },
{ category: "fair", fill: "#FFC135" },
{ category: "risky", fill: "#F44138" },
];
const useStyles = makeStyles((theme) => ({
root: {
margin: -30,
width: 160,
backgroundColor: "#fff",
borderRadius: 5.5,
},
title: {
fontFamily: "Open Sans Condensed",
fontWeight: 600,
fontSize: 18,
},
tooltipData: {
width: "100%",
height: 31,
borderRadius: "5.5px 5.5px 0px 0px",
},
label: {
color: "#fff",
fontFamily: "Lato",
fontWeight: 400,
fontSize: 14,
marginLeft: 18,
paddingTop: "7px",
},
toolValue: {
marginTop: 11,
marginLeft: 18,
fontFamily: "Roboto",
fontWeight: 600,
fontSize: 19,
},
signature: {
fontWeight: 500,
fontSize: 14,
marginTop: -10,
marginLeft: 18,
paddingBottom: 11,
paddingRight: 18,
color: "#8D8D8D",
fontFamily: "Lato",
},
}));
const data = [
{
fair: 1,
great: 1,
risky: 1,
week: "5.06 - 11.06",
},
{
fair: 1,
great: 0,
risky: 1,
week: "12.06 - 18.06",
},
{
fair: 1,
great: 0,
risky: 1,
week: "19.06 - 25.06",
},
{
fair: 1,
great: 1,
risky: 0,
week: "26.06 - 2.07",
},
];
const Categories = [
{ category: "great", fill: "#00D063" },
{ category: "fair", fill: "#FFC135" },
{ category: "risky", fill: "#F44138" },
];
const PerformanceBreakdownChart = () => {
const classes = useStyles();
console.log("categories", Categories);
return (
<ChartWrapper {...props}>
<ResponsiveContainer minHeight={150} width={"100%"} height="100%">
<BarChart
data={data}
margin={{
top: 30,
right: 20,
left: 20,
bottom: 0,
}}
barSize={20}
>
<CartesianGrid horizontal={false} vertical={false} />
<XAxis dataKey="week" axisLine={false} tickLine={false} />
<YAxis hide={true} dy={4} />
<Tooltip cursor={{ fill: "transparent" }} />
{Categories.map(({ category, fill }) => (
<Bar
key={category}
dataKey={category}
fill={fill}
isAnimationActive={false}
shape={<Rectangle radius={[10, 10, 10, 10]} />}
minPointSize={16}
>
<LabelList
dataKey={category}
position="insideBottomLeft"
dy={11}
offset="15"
angle="-90"
fill="#FFF"
/>
</Bar>
))}
</BarChart>
</ResponsiveContainer>
</ChartWrapper>
);
};
export default memo(PerformanceBreakdownChart);
The above code shows tooltip for all bars at once as follows
But, I want to show the tooltip for each individual bar as follows
What can I do to achieve this? Thanks

How to navigate to the next screen on TouchableOpacity click

I'm making an app, I've still only made the splash screen. But, I want to know how to navigate to the next screen on a touchable opacity click. I don't want to navigate by creating a specific function for the pages. I want to navigate by importing the page.
I have shown my code below.
import React from 'react';
import { Image, StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import { AppLoading } from 'expo';
import { useFonts } from 'expo-font';
const src2 = {
uri: "https://o.remove.bg/downloads/e6dc1218-7a94-4c86-a3b9-6baed9ee6c63/images-removebg-preview.png"
}
const src = {
uri: "https://o.remove.bg/downloads/7ce84ac7-f275-434c-a294-11a8b2e56e2b/pngtree-halo-victory-light-effect-png-image_1727940-removebg-preview.png"
}
function Levels({ navigation }) {
return (
<levels />
);
}
export default props => {
let [fontsLoaded] = useFonts({
'Sketch 3D': 'https://dafonttop.com/wp-data/s/870/1870/file/sketch-3d.regular.otf',
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<View style={styles.container}>
<Text style={styles.title}>My app</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Start</Text>
</TouchableOpacity>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#CFA240",
alignItems: "center",
justifyContent: "center",
},
title: {
fontFamily: "Sketch 3D",
fontSize: 50,
color: "#fff",
position: "absolute",
top: 150
},
glow: {
position: "absolute",
top: 45,
left: 20,
width: 200,
height: 200,
},
mop: {
top: 45,
left: 10,
height: 225,
width: 225,
},
images: {
position: "absolute",
top: 220,
},
button: {
position: "absolute",
bottom: 150,
padding: 15,
borderRadius: 16,
borderColor: "#fff",
borderWidth: 2,
backgroundColor: "#CFA240",
borderStyle: "dashed",
elevation: 10,
},
buttonText: {
fontFamily: "Sketch 3D",
color: "#fff",
fontSize: 25,
}
})
PS I have to go to the next screen by importing the file
Thank you.

<TouchableOpacity
onPress={() => this.props.navigation.navigate('Home')}>
<Text>GO TO HOME</Text>
</TouchableOpacity>

State not showing in my text component React Native

I'm trying to initialize a Text component in a parent component with a certain state, but it's not showing up at all. This should be something really simple and something I've done multiple times before, what am I doing wrong here? Nothing is showing up in the text component. Here is the component code:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
validationMessage: "This is a required field",
validationStyles: styles.noValidation,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
this.setState({validationMessage: "This field is required"});
/* if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}*/
}
storeValue = (inputValue) => {
this.setState({inputValue});
this.props.onChange({key: this.props.fieldId, value: inputValue});
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<View style={styles.inputContainer}>
<TextInput
autoCapitalize='none'
autoFocus={this.props.autoFocus}
onChangeText={this.storeValue}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
<Text style={styles.validationText}>{this.state.validationMessage}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputContainer: {
height: 40,
width: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
borderRadius: 2,
},
inputStyles: {
height: '100%',
width: '100%',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
validationText: {
color: '#e16e17',
fontSize: 12,
fontFamily: 'rubik-bold',
marginTop: 3,
display: 'none',
},
});

Assuming you mean this
<Text style={styles.validationText}>{this.state.validationMessage}</Text>
Your styles have
validationText: {
color: '#e16e17',
fontSize: 12,
fontFamily: 'rubik-bold',
marginTop: 3,
display: 'none',
},
The display:'none' is going to make it not show up

I tried your code and modified the backgroundColor for the text area.
labelText: {
backgroundColor: "red",
...
I get this, which I believe is what you are looking for:
Are you showing the text on a white background?

Text not displaying inside View

Why is this Text not displaying inside this View? Tried flexing on the circle and text. I like long walks on the beach and writing extra characters to qualify for this post to be active.
import React, {Component} from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default class Interest extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.circle}>
<Text style={styles.text}>{this.props.title}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
//flex: 1,
padding: 15,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 10,
minWidth: 80,
alignItems: 'center',
marginBottom: 10
},
text: {
//flex: 0,
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});

Text was hidden by padding and height. Corrected CSS is as follows:
const styles = StyleSheet.create({
circle: {
padding: 8,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 35,
marginBottom: 10,
alignItems: 'center'
},
text: {
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});