use and access style variable in react native - react-native

I just started with react-native and i'm fiddling with the styles. I want to use something i always do when working with Sass and that's creating a global configuration file with variables i can use throughout the Sass files. In Sass i would do the following:
style.scss
#import 'config/_config';
#import 'base/_base';
Then in _config.scss i would put something like $fontColor: 'red'; and then in _base.scss something like this:
p{
color: $fontColor
}
When i compile the sass files to a single css i get the expected
p{
color: 'red';
}
Now i'm trying the same in react-native, but i can't get it to work. The closest i get with a 'result' (meaning: no error, but no result either) is this:
My file App.js contains the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>My first app</Text>
</View>
);
}
}
const styles = require('./style/Style.js');
style/Style.js looks like this
import React from 'react';
import { StyleSheet } from 'react-native';
import s from './config/Variables.js';
module.exports = StyleSheet.create({
container: {
flex: 1,
backgroundColor: s.backColor,
alignItems: 'center',
justifyContent: 'center',
},
});
and style/config/Variables.js like
import { StyleSheet } from 'react-native';
const backColor = '#4F5B66';
I've also tried const styles = { backColor: '#4F5B66'};, but that didn't work either.
How can i make this work?

I solved it by defining the variables without const so Variables.js becomes
import { StyleSheet } from 'react-native';
backColor = '#4F5B66';

Related

How to Add External StyleSheet for My React Native Project

How to Add External StyleSheet for My React Native Project
Add External StyleSheet
First, you must create a file to export a StyleSheet object with styles.
Style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
box: {
width: '80%',
height: 150,
backgroundColor: 'red',
alignSelf: 'center',
borderRadius: 9
}
});
export { styles }
And in your component, you must import that.
import React, { Component } from "react";
import { View } from 'react-native';
import { styles } from "./Style";
class Home extends Component {
render(){
return(
<View>
<View style={styles.box}>
</View>
</View>
)
}
}
export default Home;
Finally, run the app.
If I understand you correctly, you want to add a style to your component/s.
I assume you are using a Functional Component.
A good practice is to do it by creating a style.js file, on the same folder where your component is located.
style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor: 'green'
}
})
export { styles }
and in your desired component you should import it.
MyComponent.js
import React from 'react'
import { View } from 'react-native'
import { styles } from './styles' //<<-- import
const MyComponent = (props) => {
. (Whatever states and handlers, etc. that your component does)
.
.
return (
<View style={styles.container}> //<<-- usage
...rest of your JSX
</View>
)
}
export default MyComponent
good luck!

useWindowDimensions use in stylesheet react native

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.

React native error - expected a string or a class but got object

I am new to react-native. I was trying to write simple programs found from tutorials in order to familiar with react-native environment. I have researched on the same bug on stackoverflow itself and couldn't find any helpful solution, that's the reason I am writing again.
I was referring to the following tutorial
https://levelup.gitconnected.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2
Following is the code that I have used.
Created a new class named EmojiDict.js
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
class EmojiDict extends Component {
state = {
'😃': '😃 Smiley',
'🚀': '🚀 Rocket',
'⚛️': '⚛️ Atom Symbol'
};
render() {
return (
<View style={styles.container} >
<Text>this.state['😃'] </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});
Then modified the App.js class as follows:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import EmojiDict from './src/components/EmojiDict';
export default class App extends Component {
render() {
return <EmojiDict />;
}
}
I have tried various examples and nothing worked when the App.js class gets modified. I am not able to go forward due to this error.
It's looks like you forgot to export the EmojiDict component
instead of class EmojiDict extends Component {
try
export default class EmojiDict extends Component {
may resolve this issue

Cannot read property 'oneOfType' of undefined

I am new to react native. I want to use 'react-native-camera'. I created a new project , installed the package correctly(I know because I have done it thrice to make sure that i'm not doing anything wrong) and it shows this error **Cannot read property 'oneOfType' of undefined ** and it is in index.js of this package 'react-native-camera'. I can't find any solution. I have tried changing gradle version, gradle wrapper properties everything that I could but this issue is not related to gradle. This is the code in my App.js. I know code isn't generating this error but i am new to react-native so maybe i'm missing something.
Any suggestion would be appreciated
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import Camera from 'react-native-camera';
export default class BarcodeScan extends Component {
constructor(props) {
super(props);
this.state = {
qrcode: ''
}
}
onBarCodeRead = (e) => this.setState({qrcode: e.data});
render () {
return (
<View style={styles.container}>
<Camera
style={styles.preview}
onBarCodeRead={this.onBarCodeRead}
ref={cam => this.camera = cam}
aspect={Camera.constants.Aspect.fill}
>
<Text style={{
backgroundColor: 'white'
}}>{this.state.qrcode}</Text>
</Camera>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
}
});
Thanks to this guy , https://github.com/dwicao/react-native-panel/issues/4
I was able to solve this issue by replacing following in index.js of package 'react-native-camera'.
Replace
import React, { Component, PropTypes } from 'react';
with
import React, { Component } from 'react';
import PropTypes from 'prop-types';
In case someone finds this thread by searching on the the title (which I did), I will add my experience. Sometimes with TSX, imports get a little weird. What worked for me was using this import:
import * as PropTypes from 'prop-types'
I also need to do the same thing with React itself or it does not work either:
import * as React from 'react'
So far, these are the only two imports I need to do this for.

React Native: Error 500 when loading custom component

I'm new to React Native and I'm trying to make a custom component for a test app, but I'm getting this error when loading the app from Expo:
Uncaught error: java.lang.Exception: Bundle return code: 500.
Image: https://i.imgur.com/wRTxa8V.jpg
(not enough reputation to post image, sorry)
My project structure is basically as follows:
/TestApp
App.js
/src
/components
CustomButton.js
CustomButton.style.js
CustomButton.style.js
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
buttonContainer: {
width: 100,
height: 20,
alignItems: 'center',
border: '1px solid white',
backgroundColor: 'skyblue'
},
buttonText: {
color: 'white',
fontSize: 20
}
});
CustomButton.js
import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import styles from './CustomButton.style';
export default class CustomButton extends Component {
constructor(props){
this.props = props;
}
render(){
return(
<TouchableOpacity
style={styles.buttonContainer}
onPress={this.props.onPress}>
<Text style={styles.buttonText}>
{this.props.title}
</Text>
</TouchableOpacity>
);
}
}
App.js
import React, { Component } from 'react';
import { Alert, AppRegistry, StyleSheet, View, Text } from 'react-native';
import CustomButton from './src/components/CustomButton';
export default class TestApp extends Component{
render(){
return(
<CustomButton/>
);
}
}
I'm pretty sure the issue is when I try to import the custom component, because the app loads when I comment the line. I've read some questions about this, and it usually happens because the path is incorrect, though I can't figure out what's wrong with my path.
Thanks in advance.
The import for the StyleSheet is wrong in your code, it must be imported from react-native
import {StyleSheet} from 'react-native'
Also constructor is not preceeding with a super class
You need to add
constructor(props){
super(props) <== If you want to access props
this.props = props;
}
The styles are also not valid, since there is no property for border, you may check this for more info.