Modify Assets in Your New App

Now, let’s open up the app and make some asset changes.

Like many other applications, your You.i React Native (RN) app has an asset pipeline. Let’s replace the You.i TV logo image and text in the sample with your choice of content.

Before you get started, find a PNG or JPG image to use in your application. It doesn’t matter too much what the image is - it can be your company logo or your favorite meme. For best results, pick an image with 4:3 or 1:1 aspect ratio.

Modify Some App Text

As with other React Native apps, you can modify most aspects while both the application and Metro bundler (Yarn server) are running. Open <AppName>/index.youi.js in your favorite editor and modify any of your app’s text. Watch the application refresh and update in real time when you save the file.

If you didn’t have the Metro bundler (Yarn server) running, use yarn start to start it, then launch your app to see your changes. Repeat the exercise to see the text change automatically.

./youi/build/osx/Debug/MyApp

./youi/build/linux/Debug/bin/MyApp

./youi/build/uwp/Debug/MyApp

Replace the You.i TV Logo Image

Copy your new image into <AppName>/youi/AE/assets/drawable/default. Go back to your editor and replace the You.i TV logo image file name with yours.

Rebuild Your App and Run It Again

Unlike text and layout changes that are handled by the Metro bundler, asset changes aren’t picked up automatically. You need to rebuild your project to copy new or updated assets to the application.

youi-tv build -p osx

youi-tv build -p linux

youi-tv build -p win64

You can leave the Metro bundler running during the rebuild, or launch it again with yarn start. Then start the app again to see your changes.

./youi/build/osx/Debug/MyApp

./youi/build/linux/Debug/bin/MyApp

./youi/build/uwp/Debug/MyApp

Next Steps

Now you have a working app with your company logo.

Next up, let’s take a look at adding JSX components for your application.