If you are new here, reading my blog for first time, let me tell you that, this blog is about the app I’m building, and in this blog I’m sharing my experience, the things I learned in react-native, some libraries, and many more things. So todays blog is about using a Modal in my code. Modal is basically a pop up window, which can be triggered to show on screen. Here in my NewsMe app i’m using Modal to show the detailed description of the app. So when user will click on one of the news list item, the modal will get triggered and it will show
the detailed description, with some features like sharing news button on social media, bookmark button etc. We can set the height, width, how much screen a modal should cover when its on. Here in my NewsMe app I’m using a fullscreen modal.So lets start with the coding.
I’m using Modal from react-native only. Its also very easy to triggere modal, theres a field called ‘visible’ which is used to trigger the modal. If the visible field is true the modal will show up and if its false the modal will close. Thats it. Thats means we need to specify a boolean value in our state and we need to define a function to change that boolean value each time we call that function, and of course we will call the function as user will click on one of the item of ListView.
This is how my modal layout will look like.
I’m calling a method by name GetItem on TouchableOpacity which is part of react-native library.
So when we will call GetItem method we will pass all the parameters like title, description, image everything so that when we call the function we can use setState to set the current state to that particular news only and when the modal is visible we will be able to access the news details.
In previous blog I wrote how we can access each ListView items value like here I’m passing parameters to GetItem method like rowData.title, rowData.description and so on for other parameters. Don’t worry once my app is on app store I’ll post my code to Github. When GetItem method is
called I’m also calling _toggleModal method with all the similar parameters, in which I’m using those parameters to set my current states. So here when user will click on one of the news, then thats news’s all the details will get store in my states and with this ‘isModalVisible:!this.state.isModalVisible’
my modal will be visible.
Npow only thing is remaining to access all the details, data about the news from states which we have just stored in _toggalModal() method. This is how my whole ListView will be
looking. So here we provide more user friendly UI, like is some news doesn’t have a Image then so a default Image, is there no link present for weblink then give user a toast about thatt, I mean the UI should be more initiative for user. To open a external url I have use Linking.openURL(URL)
This will open a link in your default browser will give a button at top of screen to go back to our app. At
least this is available in IOS, for Android I need to check that first.Also to share news on social media platform I used ’Share’
from react-native. See Side Image to have a more detailed view on it. About the bookmark button I’ll have a separate blog because i have many things to write about it, so I guess my next blig will be about the online database I have used to store user information, to store bookmarked news and what authentication I have used in my NewsMe app. Till then create and learn something new each day. If you have any doubts you can write me here in comments. Peace.