I couldn't find the current method for achieving this. It used to be:
'use strict';
var React = require('react-native');
var { StyleSheet } = React;
module.exports = StyleSheet.create({
});
In a separate file and then you would require it as follows:
var styles = require('./styles');
But that no longer seems to work?
in styles.js file, you can do
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
});
export default styles;
and in other files
import styles from './styles';
You can just do the following:
Style.js
import { StyleSheet } from 'react-native';
export default Style = StyleSheet.create({
// your styles here
container: {
flex: 1
}
});
And then you import your StyleSheet with:
import Style from 'PATH_TO_STYLE.js';
and then you can use it with:
<View style={Style.container} />
Related
I'm new to react native and I'm following a tutorial to learn the language.
I'm now trying to set a background image using ImageBackground.
WelcomeScreen.js:
import React from 'react';
import { ImageBackground, StyleSheet } from 'react-native-web';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1
}
})
export default WelcomeScreen;
App.js
import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen';
export default function App() {
return (
<WelcomeScreen />
);
}
Now I get this error: Error: Image: asset with ID "1" could not be found. Please check the image source or packager.
I have a app folder in in my projectfolder. In this app folder I have the assets folder and a screens folder. The WelcomeScreen.js is in the screens folder. The background.jpg is in the assets folder and the App.js is in the main/project folder.
I can't seem to find any way to fix this error.
Try changing your module import from react-native-web to just react-native
WelcomeScreen.js
import React from "react";
import { ImageBackground, StyleSheet } from "react-native";
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.png")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
});
export default WelcomeScreen;
You do not need to add ./app to your WelcomeScreen.js file path
App.js
import WelcomeScreen from "./screens/WelcomeScreen";
export default function App() {
return <WelcomeScreen />;
}
Hope this helps!
Getting the following error:
The component for route 'Books' must be a React component. For example:
import MyScreen from './MyScreen';
But i'm not even using react-navigation in this screen.
https://snack.expo.io/#ganiyat1/colorful-thrills
import React, { useState } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import MaterialTabs from 'react-native-material-tabs';
const Book = () => {
const [selectedTab, setSelectedTab] = useState(0);
return (
<SafeAreaView style={styles.container}>
<MaterialTabs
items={['New Releases', 'All', 'BOM']}
selectedIndex={selectedTab}
onChange={setSelectedTab}
barColor="#1fbcd2"
indicatorColor="#ff914d"
activeTextColor="white"
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
You are not exporting the Book component.
In the book component, either add export default Book to the bottom, or do export const Book.... You also need to change the import to for a default export
import Book from './components/Books';
or
import { Book } from './components/Books';
if you do a named export (export const Book).
I am trying to setup global styles in react-native.
I have imported
import {injectGlobal} from 'styled-components';
and have
class XoxoContainer extends Component {
render() {
return <Xoxo {...this.props} />
}
}
injectGlobal`
font-family: '20'
`;
But I keep getting styledComponents.injectGlobals is not a function. in the console.
That function is not part of the library on react-native according to this Github issue. That's why it keeps saying that it's not a function, because it can't find it.
create a styles.js file like this:
import React, {Component} from 'react';
import {
Platform,
StyleSheet
} from 'react-native';
export const styles = StyleSheet.create({
view_flex_one_white: {
flex: 1,
backgroundColor: white
}});
and use this anywhere in your app with import
import {styles} from "...link to file/styles";
render(){
return(
<View style={styles.view_flex_one_white}>
</View>
)
}
Create a js file with this pattern:
'use strict';
var React = require('react-native');
var myStyle = React.StyleSheet.create({
style1: { },
style2: { }
)}
module.exports = myStyle;
your component js use require to use that style sheet
var customStyle = require('../the/path/to/commonStyleSheet');
Use now like this:
<View style = {customStyle .style1} />
I want to make 2 variables for the main colors which can be used on the whole app. Here is the code:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
const primary = '#27bcb5';
const secondary = '#ffffff;
How can I export these 2 variables together for using on the app components?
Issue with the solution is :
import {DefaultStyle} from './variables';
const screenHeight = Dimensions.get("window").height;
const styles = {
wrapper: {},
slide1: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: primary,
it says can't find variable primary
You can export them with:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
const primary = '#27bcb5';
const secondary = '#ffffff';
export const DefaultStyle = {
primary,
secondary,
}
So you can use them as:
import { DefaultStyle } from './default-variables';
console.log(DefaultStyle.primary);
console.log(DefaultStyle.secondary);
You could do a named export. E.g. :
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
const primary = '#27bcb5';
const secondary = '#ffffff';
export { primary, secondary };
After that, you can import your styles via:
import { primary, secondary } from 'YOUR_FILE_PATH'
// Declarations of colors variables
const Maincolor ="#333640"
const Backgroundcolor = "#FFFFFF"
const Gridcolor = "#A7A9AB"
const colors = // Made to be bind in one because only one export is possiable
{
Maincolor,
Backgroundcolor,
Gridcolor,
}
export default colors; // exporting as default
// And in your main code where you have to include
import colors from 'path_of_the_file'
// then in styles use
style ={{backgroundColor:color.Maincolor}} // example how to use
I like to do something better, define a global file where you can save like Moment() time, Device Measures, etc.
global.js
const global = {
PRIMARY: '#27bcb5',
SECONDARY: '#ffffff,
DEVICE_MEASURES:{
WIDTH: Dimensions.get("window").width,
HEIGHT: Dimensions.get("window").height;
},
...
}
export default global
And then in your code:
import GLOBAL from '(directory)/global'
<View style={{ width: GLOBAL.DEVICE_MEASURES.WIDTH }}>
<Text style={{ color: GLOBAL.PRIMARY }}>
sup
</Text>
</View>
It's just better to have a global file where you can store all your app's configurations.
I have a file that I am using to define global styles. I would like to define a const within the file to use for the underlineColorAndroid prop.
My global stylesheet looks like this:
const React = require('react-native')
const { StyleSheet } = React
const underlineColorAndroid = '#F86C51'
module.exports = StyleSheet.create({
background: {
backgroundColor: '#F5FCFF',
},
})
I import the file like this:
import globalStyles from '../styles/global'
And I use the style within the prop like this:
underlineColorAndroid={globalStyles.underlineColorAndroid}
This doesn't work, any ideas how I can do this?
Instead of using the module.exports syntax, you can use the ES6 export statements to define both default and named exports:
export const underlineColorAndroid = '#F86C51'
export default StyleSheet.create({
background: {
backgroundColor: '#F5FCFF',
},
})
The default export can be imported as before:
import globalStyles from '../styles/global';
The named exports can be imported using curly braces to denote destructuring:
import { underlineColorAndroid } from '../styles/global';
Or both at the same time:
import globalStyles, { underlineColorAndroid } from '../styles/global';
However, it might be better to split the style sheet and the named variables into different files for clarity.