I need to pass props into Styles. So I created StyleSheet inside the class. But normal practice would be to create StyleSheet outside from the class.
I want to know are there any performance drawbacks by having StyleSheet.create inside the class ?
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { connect } from 'react-redux'
import { Text } from 'native-base'
import p from '../../assets/colors/pallets'
const EmptyContainer = (props) => {
const texts = props.texts
const styles = StyleSheet.create({
emptyContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
backgroundColor: p.background2[props.theme],
},
text: {
color: p.text1[props.theme],
},
})
return (
<View style={styles.emptyContainer}>
{texts.map((text) => (
<Text style={styles.text} key={Math.random()}>
{text}
</Text>
))}
</View>
)
}
const mapStateToProps = (state) => {
const { theme } = state
return {
theme: theme.theme,
}
}
export default connect(mapStateToProps)(EmptyContainer)
Edited:
There are several ways to pass props into StyleSheet.
Having StyleSheet inside class itself.
Pass props as function parameter to styles i.e. styles(props.theme). emptyContainer
What would be the best way by considering the performance of the app ?
Related
I am a newbie trying to work with react native context. A very simple program, but unable to show the value.
Here is the code:
import React, {Component} from 'react';
import {Text, View } from 'react-native';
export const MyContext = React.createContext();
export default class App extends Component {
static contextType = MyContext;
render() {
this.state = 1
return (
<View>
<Text> Hello There </Text>
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
</View>
);
};
};
'Hello There' gets displayed. Even if I hard-code the value for MyContext.Provider , it doesn't display anything, and there are no errors either. What am I doing wrong?
Here is an sample with a class component.
You have to create a context React.createContext
You have to apply your context with MyContext.Provider
You have to consume your context with MyContext.Consumer
import { Text, View } from 'react-native';
export const MyContext = React.createContext();
export default class App extends Component {
state = { value: 12};
render() {
return (
<MyContext.Provider value={this.state}>
<View
style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Text>Hello There </Text>
<MyContext.Consumer>
{({ value }) => <Text>{value}</Text>}
</MyContext.Consumer>
</View>
</MyContext.Provider>
);
}
}
Kindly check context example. hope it helps
Please check the working example here https://snack.expo.dev/#gaurav1995/excited-donut
import React,{useContext,useState,createContext} from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
const BasicContext = createContext({})
const BasicComp = () => {
const dummyText = useContext(BasicContext);
return(
<View style={styles.container} >
<Text>{dummyText?.hey}</Text>
</View>
)
}
export default function App() {
const [reach,setReach] = useState({ hey:"whatsup devs! loving context"})
return (
<BasicContext.Provider value={reach} >
<BasicComp />
</BasicContext.Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
How to use useWindowDimensions in Stylesheet. It always works only inside the function. I want to get screen height and width using useWindowDimensions inside the stylesheet in react native.
useWindowDimensions is a hook, so we just can use it inside a functional component. Maybe there are other ways, but I'd like to suggest you something like that:
import React from 'react';
import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';
const Main = () => {
const { styles } = useStyle();
return (
<View style={styles.container}>
<Text>Dimension Properties inside StyleSheet{'\n'}</Text>
<Text>Heigth: {styles.container.height.toString()}</Text>
<Text>Width: {styles.container.width.toString()}</Text>
</View>
)
}
const useStyle = () => {
const dimensions = useWindowDimensions();
console.log('Logging dimensions', dimensions)
const styles = StyleSheet.create({
container: {
height: dimensions.height,
width: dimensions.width,
justifyContent: 'center',
alignItems: 'center',
},
})
return { styles }
}
export { Main }
Please, let me know if this helped you.
I'm following a tutorial and I currently have this code where I am trying to change the color of a background based on a prop... This is what it looks like
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const SomeComponent = ({ bgColor }) => (
<View style={styles.wrapper(bgColor)}>
<Text style={styles.text}>3333</Text>
</View>
);
const styles = StyleSheet.create({
wrapper: color => ({
flex: 1,
backgroundColor: color,
}),
text: {
color: 'red',
},
});
I keep getting a styles.wrapper is not a function
How do I fix this?
You cannot declare a StyleSheet function like you did.
Alternatively, you can declare a JS function that passes the same style with different colors according to the arguments you pass.
You can do that as follows:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const myStyle = (color) => {
return {
flex: 1,
backgroundColor: color,
}
};
const SomeComponent = ({ bgColor }) => {
<View style={this.myStyle(bgColor)}>
<Text style={styles.text}>3333</Text>
</View>
};
const styles = StyleSheet.create({
text: {
color: 'red',
},
});
In my parent I have this code:
So I render inside it my custom inputs by this way:
My doubt is how I can access on any part of this parent the text of each input using the ref. Someone can help me?
The textinput component:
https://gist.github.com/ThallyssonKlein/4e054bc368ebc153fbf9222e304ff887
I couldn't solve the problem, apparently there is no way to get this property in pure React-Native.
So I started using the TextInput component of the react-native-paper package. This way the same code worked, I can get the text now with this excerpt:
console.log(refContainerStep1.current.state.value);
use useRef() instead of createRef();
const textInput = useRef(null);
<TextInput
ref={textInput}
....../>
You can access the ref via refContainerStep1.current.
What you can then do is check the Prototype property to check which methods you can use.
I noticed there's a function called _getText which can be used to obtain a value.
An example of grabbing the value in an onPress:
const onPress = () => {
console.log(refContainerStep1.current.__proto__); // See available methods
console.log(refContainerStep1.current._getText()); // Grab the value
}
Do it that way
const onButtonClick = () => {
console.log('get value from parent')
console.log(ref1.current.props.value)
console.log(ref2.current.props.value)
};
Example in expo
Parent
import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';
import MyTextInput from './components/AssetExample';
import { Card } from 'react-native-paper';
export default function App() {
const ref1 = React.createRef();
const ref2 = React.createRef();
const onButtonClick = () => {
console.log(ref1.current.props.value)
console.log(ref2.current.props.value)
};
return (
<View style={styles.container}>
<Card>
<button onClick={onButtonClick}>get value</button>
<MyTextInput label={'label 2'} secure={false} ref={ref1} />
<MyTextInput label={'label 1'} secure={true} ref={ref2} />
</Card>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Child
import React, { useState, useEffect } from 'react';
import { TextInput as RnTextInput, StyleSheet, View, Text } from 'react-native';
const styles = StyleSheet.create({
textInput: {
padding: 10,
marginRight: 10,
marginLeft: 10,
borderRadius: 50,
},
text: {
marginLeft: 20,
marginBottom: 10,
fontSize: 20,
},
});
const TextInput = React.forwardRef((props, ref) => {
const [text, setText] = useState('');
return (
<View>
{props.label && <Text style={styles.text}>{props.label}</Text>}
<RnTextInput
style={styles.textInput}
value={text}
onChange={(e) => {
setText(e.target.value);
}}
secureTextEntry={props.secure}
ref={ref}
/>
</View>
);
});
export default TextInput;
I am using below package currently. But I am failing to add style customisation in my AdMobBanner component. Please tell if any other package might be useful for Google Ads customisation or any other Platform Ads that supports customisation.
https://www.npmjs.com/package/react-native-admob
Please click on this link to see my current O/P. I want to remove border and add labels and buttons below it. Is it possible?
import React, { PureComponent } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { AdMobBanner } from 'react-native-admob';
const BannerExample = ({ style, title, children, ...props }) => (
<View {...props} style={[styles.example, style]}>
<View>{children}</View>
</View>
);
const adUnitID = 'ca-app-pub-3940256099942544/2934735716';
export default class GoogleAdsCompo extends PureComponent {
render() {
return (
<ScrollView>
<BannerExample title="Smart Banner">
<AdMobBanner
adSize="mediumRectangle"
adUnitID={adUnitID}
ref={el => (this._smartBannerExample = el)}
/>
</BannerExample>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
example: {
paddingVertical: 10,
justifyContent: 'center',
alignItems: 'center',
},
title: {
margin: 10,
fontSize: 20,
},
});