I have encountered a bug with react-native's Stylesheet component. It causes my iphone simulation to stay stuck on expo's logo after loading the js bundle. No errors to be found.
import { Text, View, StyleSheet } from "react-native"
var styles = StyleSheet.create({
innerText: {
color: 'red',
}
})
export var TestComponent = function() {
return (<View><Text style={styles.innerText}>NOW Lets get this working</Text></View>)
}
If I just put the style inline, it works and renders correctly. No freezing after bundle loading.
return (<View><Text style={{color:'red'}}>NOW Lets get this working</Text></View>
One thing to note is that this TestComponent is coming from a node_module. Stylesheet's work as expected in the app's codebase, but fail when coming from this node_module.
The module that exports the TestComponent was using react-native 0.68.0, but the app that uses the module was using react-native 0.64.3. When I downgraded the module to the same react-native version, it worked.
It also worked when updating the app's version instead of downgrading the other, but this time expo gives a warning: Warning: Invalid version react-native#0.68.1 for expo sdkVersion 44.0.0. Use react-native#0.64.3
I want to use my custom icons with react-native-vector-icons and Icomoon. I generated .tff and selection.js with Icomoon and put them into my project with react-native-link but The icons that I tried to use seen as empty square.
I will share with you my code and screenshoot.
Here is my import code
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import selectionConfig from "../selection.json"
const Icon = createIconSetFromIcoMoon(selectionConfig,"icomoon","icomon.ttf");
<Icon name="bag" size={64} />
This is my package.json edit:
"rnpm": {
"assets": [
"resources/fonts"
]
},
And this is the screenshot of icon:
Screenshot
Note: I put my font files under "./resources/fonts" and put selection.json under my "src" folder and I used "react-native link react-native-vector-icons" code for link these"
How Can I solve this issue?
I think maybe you have forgetten to run react native link, if you did and still does not show the icon, try delete the build file and retry.
There are two way to get your custom icon working, if linking does not help you, you may try the manual way.
This answer is referenced here: https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c
a) React Native link
Put your .ttf in a ./resources/fonts folder at the base of your project
Add this piece of code at the first level of your package.json :
"rnpm": { "assets": [ "resources/fonts" ] },
In your terminal: react-native link
b) Manual
Android: Copy your .ttf inside the ./android/app/src/main/assets/fonts folder of your RN project.
If it still does not show
delete android build folder and rerun
I had similar issues and it's because the rnpm in the package is depreciated, I solved it by creating react-native.config.js file and then I did run the link command:
Here is react-native.config.js file.
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./resources/fonts'],
};
After creating a file and adding the above code snippet, run the following command:
react-native link
If you prefer to use icons as SVG, there is an easier way to do this. I hope react-icomoon will be of use to you.
Create Icon component
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");
const Icon = (props) => (
<IcoMoon
native
SvgComponent={Svg}
PathComponent={Path}
iconSet={iconSet}
{...props}
/>
);
export default Icon;
Then use
import Icon from "./Icon";
<Icon icon="pencil" size={20} color="orange" />
By default prop-types do not run in production for a react app. I realize this is a good thing to improve performance. However, we have a Storybook that we have built and are deploying it to a static site. Storybook has an addon called Docs that detects the prop-types for components and creates a table of the prop-types for easy to read documentation.
When running the storybook locally, everything works perfectly. The prop-types are detected and this table is generated.
SpinningLoader.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
However, since prop-types are disabled in production by default. They cannot be detected when the storybook is deployed to a static site.
Is there a way to enable prop-types in production? Or some other workaround?
It's a little difficult to know without seeing more of your setup. If you're building it with the default storybook commands without and additional configuration it should "just work"...as far as I can tell.
As mentioned in a comment, Storybook has a specific build command you can add to your package.json to export it as a static app:
"scripts": {
"build-storybook": "build-storybook -c .storybook -o .out"
}
If you're using that command and it's still not working, are you using any custom webpack/build workflow, and can you post those as well?
I've built a minimal repository for reference, which may be helpful in comparing your setup. Besides the packages in package.json it's really only 3 files; Storybook config, a React component, and a Component Story:
.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
addons: ['#storybook/addon-docs'],
};
src/components/message/message.js
import React from 'react'
import PropTypes from 'prop-types'
const Message = function Message({ text, color }) {
return (<div style={{ color }}>{text}</div>)
}
Message.propTypes = {
text: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
}
export default Message
src/components/message/message.stories.js
import React from 'react'
import Message from './message'
export default { title: 'Message', component: Message }
export const withText = () => <Message text="Hello World" color="green" />
If I run the build-storybook command, cd .out, and then npx live-server, I see the static-built storybook site, with my Message component, and the 'Docs' tab that includes the prop-types:
Full repository for reference
https://github.com/BenjaminWFox/react-storybook
A workaround would be to manually specify the information you want to display in the table for each component using ArgTypes: https://storybook.js.org/docs/react/api/argtypes. Then you can continue with the documentation with that approach.
Another option would be to complete and publish the storybook while the app is still in development. This way you will have the prop-types detected and the table generated for you, then you can later build your app for production.
This is how you would declare the argTypes in the first option
// Button.stories.js
export default {
title: 'Button',
component: Button,
argTypes: {
label: {
description: 'overwritten description',
table: {
type: {
summary: 'something short',
detail: 'something really really long'
},
defaultValue: { summary: 'default-label' }
},
control: {
type: 'text',
},
},
},
};
This is the result
In case anyone runs into this issue again, setting NODE_ENV to development, as suggested here https://github.com/storybookjs/storybook/issues/8140#issuecomment-621314565, solved our problems
The issue was ultimately caused by including the transform-react-remove-prop-types plugin in our babel.config.js production environment. Without propTypes to read, there's nothing to display.
'propTypes' is a useful feature through which we can validate typechecking of props in React but it also unnecessarily creates runtime overhead. It
downgrades the apps performance.
That is the reason it is NOT available in production.
It has been made to help developers especially in a team, to find out if there is any wrong type of props been passed to the component, while writing code during the development environment.
It does not add any extra functionality. It will also add extra lines of code unnecessarily.
By keeping it in the production flow it will defeat the whole purpose.
Whether you also use Flow/typescript for typechecking, there purpose are all same.
refer: https://reactjs.org/docs/typechecking-with-proptypes.html
Now, your issue is similar to the below known issue, kindly refer below:
https://github.com/storybookjs/storybook/issues/1661
I want to set fontFamily to roboto thin of my toolbar title.
I have added roboto thin ttf in assets/fonts folder of my android project, however it seems that it is creating issues while running app. I am getting this issue while running
react-native start
ERROR EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\gener
ated\source\r\debug\android\support\v7\appcompat'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app
\\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"}
Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\genera
ted\source\r\debug\android\support\v7\appcompat'
at Error (native)
When I am removing the font then it is working fine.
I am unable to fix this issue. What's the reason?
UPDATE
Many answers are here for adding custom font in react-native for version < 0.60.
For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.
Now, in order to add custom font in react-native version > 0.60 you will have to :
1- Create a file named react-native.config.js in the root folder of your project.
2- add this in that new file
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts']
};
For those running on react-native version < 0.69.x
3- run react-native link command in the root project path.
PS Make sure you have the right path for the fonts folder before running react-native link command
For those running on react-native version >= 0.69.x, Since link is deprecated so react-native link will not work anymore,
the command react-native link is replaced by npx react-native-asset.
More info about the release can be seen here: https://github.com/react-native-community/cli/releases/tag/v8.0.0
Add your fonts file in
Project folder/android/app/src/main/assets/fonts/font_name.ttf
Restart the package manager using react-native run-android
Then you can use your font in your style e.g
fontFamily: 'font_name'
Put all your fonts in you React-Native project directory
./assets/fonts/
Add the following line in your package.json
"rnpm": {
"assets": ["./assets/fonts"]
}
finally run in the terminal from your project directory
$ react-native link
to use it declare this way in your styles
fontFamily: 'your-font-name without extension'
If your font is Raleway-Bold.ttf then,
fontFamily: 'Raleway-Bold'
Update:
From the cli docs, "rnpm" is deprecated and support for it will be removed in next major version of the CLI.
Instead, create a react-native.config.js in your project folder
module.exports = {
assets: ['./assets/fonts'],
};
Put your fonts in ./assets/fonts. Reference your fonts (e.g. McLaren-Regular.ttf) in the styles prop, {fontFamily: 'McLaren-Regular'}. If you're using styled components, then font-family: McLaren-Regular
No linking or legacy build settings needed for either platforms. If that didn't work (sometimes it doesn't for me), run npx react-native link, even if you're using autolinking.
If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.
Steps:
Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)
From the target component (for example: App.js) load Expo's Font module:
import { Font } from 'expo'
Load the custom font using componentDidMount:
componentDidMount() {
Font.loadAsync({
'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
})
}
Finally, use the style attribute to apply the desired font on a <Text> component:
<Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
STEP 1:
Create a config file at the root of the project named "react-native.config.js"
STEP 2:
Add the following code inside.
module.exports = {
project: {
ios:{},
android:{}
},
assets:['./assets/fonts/'],
}
STEP 3:
Run the following command:
npx react-native link (React-native version < 0.69)
npx react-native-asset (React-native version > 0.69)
Adding Custom Font with EXPO
If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.
Steps
Move your font to asset/fonts folder
From the target component (for example: App.js) load Expo's Font module:
import { Font } from 'expo'
Set a state
this.state = {
fontLoaded: false
}
Load the custom font using componentDidMount:
async componentDidMount() {
await Font.loadAsync({
'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
})
this.setState({fontLoaded: true})
}
Finally, use the style attribute to apply the desired font on a component:
{
this.state.fontLoaded
? <Text style={{
fontSize: 48,
fontFamily: 'ComicSansBold'
}}>Glad to Meet You!</Text>
: null
}
Enjoy Coding....
My Output:
RNPM has been merged into React Native core. This means that you don’t need RNPM anymore. So please they don’t want you to use it. Stop using it.
Here are 7 steps broken down to help you set fonts up:
Have your fonts ready, you can download your fonts from GoogleFonts, AdobeFonts, etc. Fonts can be in .ttf, or .otf
Create a configuration file in the root of your project for fonts. Create a file called:
react-native.config.js
Create the folder to house your fonts. You can create a folder called fonts inside the assets folder.
Paste your .ttf or .otf fonts inside of it.
Write a configuration inside of react-native.config.js file, and paste the following:
module.exports = {
assets: ['./src/assets/fonts'],
};
Change the path to the path of the folder housing your fonts.
Now natively set the fonts for Android and IOS. You don’t need to manually do that, just run on your terminal:
react-native link
Any new fonts you add, make sure you run react-native link again on your terminal to natively set the fonts.
#nitin-anand's answer was the most appropriate and cleaner than the rest, but that method is now deprecated and now we will have to create a react-native.config.js file in our root with the following configuration as an example:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts'],
};
Set in Project.json:
rnpm {
assets:assets/fonts
}
react-native link
For ios:
Add your fonts in given folder structure :
/assets/fonts
and place your fonts in it .
In the root folder . Add a file named
react-native.config.js
copy the code and paste
module.exports = {
assets: [‘./assets/fonts’]
}
you can easily add Google & custom fonts to react native projects via Expo-font.
1-Using google fonts in react native:
import expo-fonts:
import { useFonts, Inter_900Black } from '#expo-google-fonts/inter';
// install pakages related to your favourite font for example:#expo-google-fonts/roboto & etc.
then use this hook at the top of your component hierarchy:
let [fontsLoaded] = useFonts({
Inter_900Black,
});
//fontLoaded indicates the loading state of your font
using font:
<Text style={{ fontFamily: 'Inter_900Black'}}>Inter Black</Text>
2-Using custom fonts in react native:
import expo-fonts:
import { useFonts } from 'expo-font';
use this hook at the top of your component hierarchy:
let [fontsLoaded] = useFonts({
'Custom-Font': require('./assets/fonts/Custom-Font.otf'),
});
using font:
<Text style={{ fontFamily: 'Custom-Font'}}>Inter Black</Text>
Add in project.json file
rnpm {
assets:assets/fonts
}
Then perform react-native link
The best way to do it would be to create your own custom component for Text and import it from another file.
Assuming you want to change the default font to "opensans-semibold" (that is the name I gave it after downloading it and saving it).
TYPESCRIPT:
import React from 'react';
import { Text as DefaultText, StyleSheet } from 'react-native';
export function Text(props : any) {
return(
<DefaultText style={[styles.defaultStyles, props.style]}> {props.children} </DefaultText>
)
}
const styles = StyleSheet.create({
defaultStyles: {
fontFamily: "opensans-semibold"
}
});
Now import this anywhere else as:
import { Text } from './path/to/component'
and use it as you normally would.
The correct way
import React from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
export default props => {
let [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>Inter Black</Text>
<Text style={{ fontSize: 40 }}>Platform Default</Text>
</View>
);
};
For react-native version above 0.60, create a react-native.config.js file in the root of the directory and add the below code,
module.exports = {
assets: ['./assets/fonts'],
};
And you should also have the assets folder in root of the directory. Then just run the command npx react-native-asset in your terminal. This is should just work fine.
becareful if assets in src folder
in react-native.config.js file
module.exports = {
project: {
ios:{},
android:{}
},
assets: ['./src/assets/fonts']// assets in src folder
// assets: ['./assets/fonts']// if assets in root use this
}
For Android :
put your custom fonts in the following folder:
Project folder/android/app/src/main/assets/fonts/font_name.ttf
Run react-native run-android
Use the font i your code:
title: { fontSize: 20, fontFamily: " font Name" },
I am following the official react native documentation to install and run a sample react native app. I created a sample app by doing:
create-react-native-app AwesomeProject
cd and then I installed Expo app as directed and scanned the QR code and I opened the app.js file
app.js
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>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},https://stackoverflow.com/questions/278192/view-the-change-history-of-a-file-using-git-versioning
});
Then I removed <Text>Shake your phone to open the developer menu.</Text>
and saved to check if the changes on the editor are reflecting on the mobile app.
But I am not seeing any changes on the expo app yet. I even opened the chrome browser on android mobile and entered the ip address, still no changes.
The app won't automatically reload the JavaScript until you turn on either Live reload or Hot reload from the developer menu.
The dev menu can be accessed by shaking the device, or pressing Cmd+D on iOS simulator, or Cmd+M on the Android simulator. Note that on some Android devices, the shake needs to be quite vigorous to register.
Make sure npm server is running(if not start the service by command 'npm start')
Access developer menu by shaking device or use command 'adb shell input keyevent 82
' or press ctrl+M (on linux)
Select 'Enable Live Reload' from dev menu option
The screen should reload with your changes once you save it.