Posts

React Native Splash Screen

In this tutorial we will learn how to create a splash screen in react native for android We will use the following plugin for the react native splash screen React Native Splash Screen Installation Getting Started Usage API 1. Installation First step(Download)   Run   npm i react-native-splash-screen --save Second step(Plugin Installation) Automatic installation react-native link react-native-splash-screen  or  rnpm link react-native-splash-screen Manual installation In your  android/settings.gradle  file, make the following additions: include  ':react-native-splash-screen'     project( ':react-native-splash-screen' ) . projectDir  =   new   File (rootProject . projectDir,  '../node_modules/react-native-splash-screen/android' ) In your android/app/build.gradle file, add the  :react-native-splash-screen  project as a compile-time depen...
Post a Comment
Read more

Creating Gauge chart in React Native

Image
Basic components needed for a gauge chart are Dial Needle Progress We create the dial using the following piece renderDial = opts => { return ( <Circle cx={opts.cX} cy={opts.cY} r={opts.radius} fill="none" stroke={opts.dialColor} strokeWidth={opts.dialWidth} /> ); }; And for the needle we will create it using  Line  in Svg Time to bind everything <Svg className={opts.className} height={size} width={size} viewBox={`0 0 ${size} ${size}`} > <Defs>{this.defineTick(opts)}</Defs> <G transform={`rotate(-90 ${cX} ${cY})`}> {this.renderDial(opts)} {this.renderTicks(opts)} {this.renderProgress(opts)} {this.renderNeedle(opts)} {this.renderText(opts)} </G> </Svg> Click here to view the codes from  repo Implementation of Gauge <Gauge size={200} curre...
Post a Comment
Location: Coimbatore, Tamil Nadu, India
Read more