- This week we debug React in Visual Studio Code, use GraphQL fragments, use React Styled Components, build better databases with PostgreSQL and much more!
- In this guide I will show you how to supercharge your React workflow with Visual Studio Code’s debugging features.
- This article includes some basic term and fundamentals approach for React JS and & React Native.
- 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 debug React in Visual Studio Code, use GraphQL fragments, use React Styled Components, build better databases with PostgreSQL and much more!
Continue reading “ReactJS, React Native & GraphQL Newsletter: 62”
- React is a framework for building performant interfaces for the web and other platforms.
- You should use this guide as a companion to the official Facebook documentation for getting started .
- I hope you enjoy learning React.
- When you write your first React app, you might start with something like this.
- While these things aren’t required to write React, most React developers use them because they tend to be easier to use and more maintainable.
Learn React with interactive examples.
- How to Add a Splash Screen to a React Native App (iOS and Android)I’m often asked about that last mile of developing a React Native app (actually getting it into the app store).
- There’s more to it than just building your app and sending it off to Apple/Google — you’ve got to add icons, splash screens, write descriptions, and more before sending it off for review.In this tutorial we’ll be working in the platform IDEs and writing a bit of native code.
- The Phonegap repo has a guide on the various size splash screens your app should include but in this tutorial we’ll use Image Gorilla by Ape Tools to generate all the necessary sizes for our splash screen (as well as icons, but we won’t use those in this tutorial).
- Once Image Gorilla completes and you download and extract the zip file you’ll see multiple directories, we’re only interested in the Android and iOS ones.Adding Splash Screens (iOS)First open the project in Xcodeopen scroll down to “Launch Images Source” and click “Use Asset Catalog…”and press “Migrate” when prompted.
- You might have to mess with it a bit to take care of all of them.If you run your application now you should see the new splash screen in use.Note: I had to delete the app from the simulator before re-building the app for the splash screen to work.Adding Splash Screens (Android)Much of these instructions are pull from this article.
I’m often asked about that last mile of developing a React Native app (actually getting it into the app store). There’s more to it than just building your app and sending it off to Apple/Google — you…
Continue reading “How to Add a Splash Screen to a React Native App (iOS and Android)”
- However, react-native-navigation is not required for embedding the PESDK into your React Native application.Launching the PhotoEditor SDK from React NativeTo successfully launch our editor from React Native we needed to do three things:Add the PESDK library to our iOS project.Create a native module that bridges between React Native and the PhotoEditor SDK.Add a method to create a ToolbarController, push a PhotoEditController and present them from the current view controller.Call the method, wherever we want to edit an image in our React Native codeThe first step was rather easy.
- In the classes implementation we registered our module with React Native by calling RCT_EXPORT_MODULE(PESDK):In order to create a new photo editor view controller we needed to create a new ToolbarController and push a PhotoEditController that loads a sample image.
- All image fetching, scrolling, etc. is handled by React Native, so we only needed to handle the user’s taps on an image:We used react-native-fs to download a larger resolution image to the local filesystem, pass the path of the local file to our present() call and modify our iOS native module:We then had a nice little app, that shows a grid of images, loads a high-resolution image upon selection and opens the PhotoEditor SDK:The iOS demo app running on a device.Android implementationAs we have seen, opening the PESDK from React Native can easily be done on iOS.
- To accomplish this we needed to repeat some of the previous steps for Android:Add the PESDK to our Android project.Create a native module that bridges between React Native and the PESDK.Add a method to launch an ImglyIntent using the PhotoEditorBuilder from the current Activity.Installing the SDK is again done by following the instructions for integrating the PESDK and shouldn’t take more than a few minutes.
- Creating a native module on Android is quite similar to iOS, although a little more setup code is required: We created our PESDKModule that recreates the present(path) method from iOS, a PESDKPackage containing our module and finally added the package to our Application:This time, we prepared the desired settings for our editor, added our image path and passed everything to a PhotoEditorBuilder.
Often our users ask whether it’s possible to use the PhotoEditor SDK for iOS and Android with React Native (the good news right away: Yes, it is possible and fairly easy as well). So, we set out to…
Continue reading “PhotoEditor SDK + React Native – imgly”
- This guide aims to pull together quality content about React core concepts into a central location for quick reference.
- If you find this guide helpful let me know @timarney.
- There’s lots to learn but if you break it down there are some key concepts to focus on.
- JSX, React Elements, Components, Lifecycle Methods, Props and State.
- These articles will start you down the path to learning React.
Continue reading “React FAQ”
- Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups.
- As I said before, React Native is an open source platform, and apps that use open source modules for React are quite common.
- During the process of creating this color wheel, my team and I developed this open source package for everyone who wants to create a dial on React Native.
- From my point of view, React Native will be one of the frameworks companies will use for building their native apps in the near future.
Continue reading “At a glance: React Native for building apps”
- In this story, I would like to share how ListView can be used to optimize image processing when scrolling through images.Consider a list of entries like an Instagram feed.
- Finally, when the entry goes outside the viewport, and if the image hasn’t been cached yet, we would like to cancel the request to the image URI in order to prioritize requests for the visible entries.In the example below, we fetch entries from a firebase backend by pages of ten.
- When we reach the end of the list, we fetch a new page by using the onEndReached event.Now we can use onChangeVisibleRows() to only mount images when they are visible.
- In onChangeVisibleRows(), we update the visible property for each row that becomes visible or invisible.In the Row component, we can use the visible property to mount/unmount the image according to its visibility.
- We use the react-native-img-cache package for this.In the last step, we cancel the HTTP request to download the image if the row becomes invisible.
In mobile apps, scrolling through a list of images is a very common use case for which users have high expectations. In a previous story, I shared formulas that I used in order to cache images with…
Continue reading “Image Pipeline with React Native ListView – William Candillon – Medium”