Join Samer Buna for an in-depth discussion in this video The game component with a random target, part of React Native Essential Training.
- [Instuctor] Let's start on the game logic. First of all, it might be a good idea to have a game component and make the app component render that game component and put all the logic related to a single game inside the game component. This way we can have the app component reset the game component at any point by just remounting another game component, which will be handy when we need to replay the game. So I'm going to copy the content of this file, this will be our game component, and in the app component I'll just render this game component.
I don't need any children here, so I'm going to make it self closing, and we'll import game from the same level here, game.js, which means I no longer need the view, or actually the style sheet, I don't need anything from React Native. So this is just rendering the game component. Again, we'll come back to this app component when we need to, and you'll see why this decision is a good one to start with every time you have a case like this. Also, in here, we can have some defaults, any properties that we want to pass to the game component can be controlled from within the app component itself.
So far we don't know these properties, we'll come back here once we do. All right, let's create the game component, game.js. This is the exact app component that we started with, but we'll name it game. And what I want to do first in this game component is to specify the target sum itself, the initial number that we want to challenge the players to find the sum for. So let's create a text component in here, and inside the text component I'll just have a placeholder of 42.
We need to import text from React Native. Let's test. So you'll see the 42 appearing here in the corner, let's actually give it some styles. We'll do style equal styles.target, this is our target div. I am not a CSS expert, but I'll do some minimal styling in this app just to get things to look decent for now. I'll fast forward to the styles that I came up with here and explain them real quick. I've given the container a padding tub of 30 so that we keep out of the way of the phone controls here.
I gave the target a bigger font and a different background color and a little bit of horizontal margin using this margin horizontal property which is an example of a layout property that is introduced just in React Native and it's equivalent to setting both margin left and margin right. So you notice how I get the styling out of the way before I actually start thinking about the logic of this target value, which is, by the way, right now. So instead of 42 we need a dynamic value that is generated for every game.
So when I initialize a game I need a private property for this game with a randomly selected target. So when I need something private to the game instance itself, that's the sign that it should go on the instance of the property directly. For example, we'll call it target, so this.target. Of course, I don't have a target, so let's go ahead and just generate a random target. So target equal, we'll do math.random, and this gives me from zero to .999.
So let's do a target between 10 and say 50. You don't want a target under 10 because that would be easy to solve, so we'll do 10 plus 40 times math.random, and we'll floor this so that we don't have any fractions. Ad this should actually work, let's test it. 46, 32, 25, excellent. In the next movie we'll generate the random numbers that will potentially sum to this target.
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers