In this article, I am going to show you how you can create your custom Text Component for your React Native Project.
Create New Project
If you are new to mobile development, the easiest way to get started is with Expo CLI.
If you are already familiar with mobile development, you may want to use React Native CLI.
Expo CLI
expo init MyApp
cd MyApp
React Native CLI
npx react-native init MyApp
cd MyApp
For sake of simplicity I will be using Expo for creating new React Native project. Once we created new project, we create folder src
where we put folder components
. Inside folder components
we create another folder for our custom text component MyText. Inside this folder add index.js
file. So far project looks like this:
Our component index.js
looks like this:
import * as React from 'react';
import { Text } from 'react-native';
const MyText = ()=> {
return (
<Text>Custom Component</Text>
);
};
export { MyText }
Now it is time to add custom props to our component. I will be adding most common props for general understanding concept.
h1
- for text size 48px
h2
- for text size 32px
h3
- for text size 20px
h4
- for text size 18px
h5
- for text size 16px
p
- for smaller texts,
bold
- for making text bold
italic
- for making text italic
title
- for passing text value
style
- for custom styling
...rest
- other props
import * as React from 'react';
import { Text } from 'react-native';
+ const MyText = ({ h1, h2, h3, h4, h5, p, bold,
+ italic, title,style, ...rest })=> {
return (
<Text>{title}</Text>
);
};
export { MyText }
Now lets pass our props to actual body of our component with appropriate styles.
import * as React from 'react';
import { Text } from 'react-native';
const MyText = ({ h1, h2, h3, h4, h5, p, bold,
italic, title,style, ...rest })=> {
return (
+ <Text style={[
+ h1 && { fontSize: 48 },
+ h2 && { fontSize: 32 },
+ h3 && { fontSize: 20 },
+ h4 && { fontSize: 18 },
+ h5 && { fontSize: 16 },
+ p && { fontSize: 12 },
+ bold && { fontWeight: 'bold' },
+ italic && { fontStyle: 'italic'},
+ style
+ ]}{...rest}>{title}</Text>
);
};
export { MyText }
Let's see what we have done so far. We will be testing our component inside App.js
. First we import our component from components
folder and call it inside App.js
.
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { MyText } from './src/components/MyText'
export default function App() {
return (
<View style={styles.container}>
<MyText title={'Header 1'} h1/>
<MyText title={'Header 2'} h2/>
<MyText title={'Header 3'} h3/>
<MyText title={'Header 4'} h4/>
<MyText title={'Header 5'} h5/>
<MyText title={'Small Text'} p/>
<MyText title={'Header 1'} h1 italic/>
<MyText title={'Header 1'} h1 bold/>
<MyText title={'Header 2'} h2 italic/>
<MyText title={'Header 2'} h2 bold/>
<MyText title={'Header 3'} h3 italic/>
<MyText title={'Header 3'} h3 bold/>
<MyText title={'Header 4'} h4 italic/>
<MyText title={'Header 4'} h4 bold/>
<MyText title={'Header 5'} h5 italic/>
<MyText title={'Header 5'} h5 bold/>
<MyText title={'Small Text'} p italic/>
<MyText title={'Small Text'} p bold/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Result
Responsiveness
We successfully created our custom Text component. Now lets handle responsiveness of our Text component.
In order to do this, create adjust.js
file inside src
folder.
import { PixelRatio, Dimensions} from 'react-native';
const pixelRatio = PixelRatio.get();
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const adjust = (size) => {
if (pixelRatio >= 2 && pixelRatio < 3) {
// iphone 5s and older Androids
if (deviceWidth < 360) {
return size * 0.95;
}
// iphone 5
if (deviceHeight < 667) {
return size;
// iphone 6-6s
} if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.15;
}
// older phablets
return size * 1.25;
} if (pixelRatio >= 3 && pixelRatio < 3.5) {
// catch Android font scaling on small machines
// where pixel ratio / font scale ratio => 3:3
if (deviceWidth <= 360) {
return size;
}
// Catch other weird android width sizings
if (deviceHeight < 667) {
return size * 1.15;
// catch in-between size Androids and scale font up
// a tad but not too much
}
if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.2;
}
// catch larger devices
// ie iphone 6s plus / 7 plus / mi note 等等
return size * 1.27;
} if (pixelRatio >= 3.5) {
// catch Android font scaling on small machines
// where pixel ratio / font scale ratio => 3:3
if (deviceWidth <= 360) {
return size;
// Catch other smaller android height sizings
}
if (deviceHeight < 667) {
return size * 1.2;
// catch in-between size Androids and scale font up
// a tad but not too much
}
if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.25;
}
// catch larger phablet devices
return size * 1.4;
} return size;
};
export default adjust
If to explain this file succinctly, this contains function that handles text size for multiply devices and platforms.
Before passing our function to our component, it is worth to mention that currently we defined kind of 'static' value to our font size. Once we pass adjust
function to our component based on device or platform it will automatically adjust Text size to the screen.
Passing adjust
function to our component
import * as React from 'react';
import { Text } from 'react-native';
import adjust from "../../adjust";
const MyText = ({ h1, h2, h3, h4, h5, p, bold,
italic, title,style, ...rest })=> {
return (
<Text style={[
h1 && { fontSize: adjust(48) },
h2 && { fontSize: adjust(32) },
h3 && { fontSize: adjust(20) },
h4 && { fontSize: adjust(18) },
h5 && { fontSize: adjust(16) },
p && { fontSize: adjust(12) },
bold && { fontWeight: 'bold' },
italic && { fontStyle: 'italic'},
style
]}{...rest}>{title}</Text>
);
};
export { MyText }
Final Result.
You can see in this final result, how adjust function influences to our custom text component.
Initially we passed font-size just as it is, without taking into account device or platform. However, when we pass adjust
function our text component scales up.
Full source code of this project: Github Link
Feel free to comment my mistakes on comment below.
References:
Adjust.js file were modified, original file given from Galio Framework
Top comments (5)
medium.com/react-native-training/b...
npmjs.com/package/react-native-res...
Above links will provide best way to make screens responsive on all devices.
Thank you
Not best.
Thanks for this
You're welcome