Say “Hello world” using React Native in Linux – Code Like A Girl

Say “Hello world” using React Native in Linux

  • Say “Hello world” using React Native in LinuxStart the journey of developing native apps now.Hi everyone.So far I’m beginning to learn React Native and I’m very happy to share my way of starting out.Some background about me : I am 20 years old, a third year Computer Science student, and currently working as…
  • Install the React Native CLI.You may install this using the following command : npm install -g react-native-cli3.
  • Create a new React Native project.To start a new project, type the following command : react-native init project name4.
  • Run the react native appRun and build the app using the following command:for android : react-native run-androidAfter successful build, the following will appear on your mobile phone :Welcome message of a new React Native AppCongrats!
  • ^_^ConclusionReact native makes mobile development fun and easy by enabling developers to use the same JS codebase for building both android and ios native apps.I’m really looking forward to building my own mobile apps using React native soon.

This tutorial will focus on setting up your react native development environment on Linux as well as running your “Hello World” app in your mobile android device. We will build our application in a…
Continue reading “Say “Hello world” using React Native in Linux – Code Like A Girl”

Supercharge Your React Native Development With React-Native-Debugger

  • Supercharge Your React Native Development With React-Native-DebuggerReact Native Debugger App IconThere will always be bugs — we will never run out of them.
  • There is struggle and get frustated debugging, and then there is chilling debugging where there is a tool to help you save time and effort.As the wise Edsger Dijkstra once saidIf debugging is the process of removing software bugs, then programming must be the process of putting them in.What is React…
  • It combines 3 very important debugging tools to make your development life cycle awesome.Screenshot of React Native Debugger zero stateReact Developer Tools lets you inspect the React component hierarchy, including component props and state.
  • It gives you the ability to inspect/change elements in your react native app just like you would in your web browser for webpagesRedux DevTools lets you inspect every state and action payload change.
  • When you print to the console with console.log in your code or use the debugger statement, you can see them in your Chrome devtools.React Native Debugger brings all these tools together and makes your development life a whole lot easier, trust me.

There will always be bugs — we will never run out of them. There is struggle and get frustated debugging, and then there is chilling debugging where there is a tool to help you save time and effort…
Continue reading “Supercharge Your React Native Development With React-Native-Debugger”

Creating React Native apps with Django rest-api

A app developer shares how to create React Native apps using Django

  • In this blog post, I am going to share basic steps for developing a React Native app with Django rest-api.
  • I have been mostly developing native mobile apps But sometimes it seems like time consuming to develop a simple app with same functionalities for both iOS and Android.
  • Finally, we create an api function in views.py which will server requests at /api/list end poin_t_ – – We are ready for creating our React Native app now.
  • You can try out expo APIs here – – In Short, React Native is powerful framework for building iOS and Android apps.
  • Find the full source code of React Native app (PyconLunch) on Github.

This blog post explains about creating a simple React Native app with modern tools and packages.
Continue reading “Creating React Native apps with Django rest-api”

ReactJS, React Native & GraphQL Newsletter: 58

  • , discuss the new licensing updates to React, React Native & GraphQL, use Power BI for data visualizations and much more!
  • Hot Module Replacement support to Haul, a command line tool for developing React Native apps based on Webpack.
  • If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form.
  • That’s it for the newest edition of the best ReactJS, React Native & GraphQL Newsletter!
  • Like & follow for all the news about ReactJS, React Native & GraphQL!

This week we look at React 16 (finally!), discuss the new licensing updates to React, React Native & GraphQL, use Power BI for data visualizations and much more!
Continue reading “ReactJS, React Native & GraphQL Newsletter: 58”

Testing in React Native — Jest & Detox – Pillow.codes

Testing in React Native  with  Jest & Detox



#ReactJS #Jest

  • Testing can help identify bugs introduced during the development phase of the app and addressing these bugs before release means that your users will always get to use a reliable product.What kind of tests can we use?Unit tests are used to test small modular pieces of code (aka units) independently.Integration tests…
  • One of my favorite things about Jest is a feature called Snapshot testing.Snapshot tests are a very useful tool whenever you want to make sure the UI for a component or the object from an redux action or reducer does not change unexpectedly.Here’s a good explanation of what a snapshot…
  • Here’s a simple example on how to set this up.Jest tests for Pillow Pro appE2E tests: DetoxAn end-to-end test emulates a user by finding and interacting with pieces of UI in your app in a production/release environment.Detox is a gray box E2E Tests and Automation Library for Mobile Apps built by WixWe…
  • Here’s how we handle them in Detox:LoginHere’s a simple example of what a detox test for logging into the app might look like:DemoAnd finally, here’s a part of our E2E test suite in action.
  • Also, automating the tests on Bitrise CI has helped us streamline our release pipeline by preceding every release with the tests workflow.Hopefully, this post details how easy it is to test a React Native app and automate the testing process as well.

At Pillow, we release an update to our Pillow Pro app (iOS & Android) every 2 weeks or so. Most releases are over-the-air (OTA) updates that are done using CodePush, and are fully automated with…
Continue reading “Testing in React Native — Jest & Detox – Pillow.codes”

10 Best React Native App Templates of 2017

10 Best #React Native App Templates of 2017 | via @tuts+   #appdev

  • One of the most popular React Native app templates available at CodeCanyon, MStore Pro allows users to convert their existing online shop to a mobile store app.
  • The React Native app template allows users to quickly and easily create a currency converter mobile app for any country in the world.
  • The cleverly named Tudu React Native app template aims to help developers create a simple, streamlined productivity app that will appeal to a wide cross-section of users.
  • This React Native app template allows users to register with their name, email and a password, and lets them start chatting with other members in the group.
  • So polish up your app’s initial appearance with BeOnboard, a collection of 18 React Native app templates which are designed to be used with any app in order to explain the app’s functionality to new users.

React Native has
been gaining in popularity for one obvious reason: it allows developers to write
code across different mobile operating systems. This means that they no longer
have to build the…
Continue reading “10 Best React Native App Templates of 2017”

Easily Build Forms in React Native – React Native Development – Medium

How to Easily Build Forms in React Native:

  • It makes creating forms in React Native easy by simply having to define a model for that form and you’re set!
  • Snack will automatically pull that in for us.Tip: I find that scanning the QR code from the Expo app on my device gives the best development experience.If you prefer to do this outside of Snack make sure you install tcomb-form-native via npm or yarn.What We’re BuildingWe’ll be building a sign up…
  • First we need to get the Form component (line 6) then we need to render the form and pass our model to it as the type (line 19).
  • We create an object, add a key named “fields” (since we’re modifying the fields), add a key to this object that aligns with the key in our model (“terms”), and then inside that object we set the new label.Code is easier to understand.Then pass those options to the Form componentLet’s…
  • Just about everything in the default form is customizable.As you can see tcomb-form-native makes building forms quick and easy but also gives you the flexibility you need to create forms the give users the necessary info and fit with the rest of your app (unless I’m designing of course).

If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably build quite a few (sign in, sign up, edit profile, etc.) Yeah…
Continue reading “Easily Build Forms in React Native – React Native Development – Medium”