Now with that input container defined and with a couple of new styles covered therefore,
we can do something which I mentioned that it would always be a good idea,
we can split our application into multiple components.
This look here,
this input container look, this card look is probably something we want to use in other parts of the application
as well.
We might have different items which we want to present in such a card,
consider you're building an online shop where you have each product in such a card
on the overview screen. Now to avoid repeating this style definition over and over again, we can outsource
it into a separate component, a component that doesn't really have much logic in it but which controls
the styling of its content,
a pure presentational component therefore. Technically it still is a regular React component and hence
I'll create a new file here in the components folder and name it card. Name is up to you but it is this
typical card look
so it sounds like a fitting name to me.
Now here as always, import React from React and then also import the view from React
Native here and then create the card component, a functional component like this which you in the end
export as a default
and obviously since it's all about presentation here, we'll need the stylesheet to create a style object
because that will be the core thing of this component,
it should be there to wrap itself around any content and just apply some general styling.
So now, I'm going to the start game screen and I'll grab all the styles here of the input container,
copy them from there and add them to the card instead. Here I'll add a new card property and use my styles
in here
and inside of the card component,
I'll have a very simple markup so to say, very simple jsx code.
It's just a view which I return here which should be wrapped around props children, props children is that
special prop in React which is basically the content you pass between the opening and closing tags of
your custom component. So it can wrap itself around any content because the only goal of this card component
is to apply some style to the surrounding container and we do this by adding styles card here.
Now there is just one thing, there are certain styles in here which probably should not be set from from
inside of the card,
not every card might have this width or max width and not every card should center its content.
Hence I'll cut these three items from there and only have the shadow and the padding set up in
here and I want to make this a bit more flexible.
Besides the card styles, it would be nice if we could also assign our own styles from outside and maybe
even override some of the card styles. We can do this by passing in a new object to the style prop and
distributing all the properties, all the key-value pairs of our cards style here into this new object.
This is the spread operator, a modern Javascript feature which pulls all the key-value pairs of an object
out of that object and adds it to a new surrounding object.
So we copy all the styles defined down there into this new object
and I'm doing this so that I can also add another key-value pair here or another set of key-value
pairs where I take all the styles defined in props styles, so in the style prop I passed to my own custom
component,
I take all the key-value pairs defined there and merge them into this object and since I do this second,
this will override any key-value pairs set up in styles card, so that we can override any styles set
up in there from outside when we use our component
and when we add additional styles outside of the component, it will also merge that in and consider it
and with that we can also assign our own styles from outside of the card component when we use the card
component and using the card component is something that would make sense as a next step.
So let's go to these start game screen and import card from the components folder and there from the
card folder and replace our input container view here with card, like this, just like this, with opening
and closing tags.
Now again, I want to set my own styles, I want to set my own width, max width and align items,
so I'll keep input container in the stylesheet down there
but now get rid of all the other styles in there, all the styles which are now set up in the card
so that we
only keep the width and alignment here and then add this here to card on the style prop which is
accepted or which has an effect because in the card component, it's that style prop which I merge with
my other styles, so for that style prop, I'll point at styles input container. Now with that if we save
that, I'm getting an error,
object is not a function near React Native stylesheet.
So in the card.js file as it points here, something's wrong, even gives me the line number, it's line 10,
that's
what this number here means and yes, my problem here is that I use stylesheet like this,
that's wrong,
instead we have to call Stylesheet.create to define our own styles,
so that's the right syntax.
So it's a syntax error, not technically a syntax error but I'm using the stylesheet object incorrectly.
So it's an error from my side, the error message helped us with that and now we have the same look as
before but we have that reusable card which we can now use in any place where we want to have
exactly this look with the shadows and so on.