{"componentChunkName":"component---src-gatsby-theme-try-ghost-templates-post-js","path":"/5-tips-to-become-a-react-native-developer/","result":{"data":{"customPost":{"id":"Ghost__Post__615c9bad3eea8f060129b2cd","title":"5 Tips To Become A React Native Developer","slug":"5-tips-to-become-a-react-native-developer","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/10/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","excerpt":"If you are considering learning how to build android or iOS apps using React Native then this article is for you.","custom_excerpt":"If you are considering learning how to build android or iOS apps using React Native then this article is for you.","visibility":"public","created_at_pretty":"5 Oct 2021","published_at_pretty":"7 Oct 2021","updated_at_pretty":"7 Oct 2021","created_at":"2021-10-05T18:38:37.000+00:00","published_at":"2021-10-07T13:31:24.000+00:00","updated_at":"2021-10-07T13:31:24.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"chatty","url":"https://backend.shahednasser.com/author/chatty/","name":"Chatty Garrate","bio":"Chatty is a freelance writer from Manila. Aside from her job as a language evaluator for local and international students, she enjoys writing about various topics such as technology and business.","cover_image":null,"profile_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Chatty.jpg","location":null,"website":"http://www.linkedin.com/in/chatty-garrate1","twitter":"@ChattyGarrate","facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"chatty","url":"https://backend.shahednasser.com/author/chatty/","name":"Chatty Garrate","bio":"Chatty is a freelance writer from Manila. Aside from her job as a language evaluator for local and international students, she enjoys writing about various topics such as technology and business.","cover_image":null,"profile_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Chatty.jpg","location":null,"website":"http://www.linkedin.com/in/chatty-garrate1","twitter":"@ChattyGarrate","facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Chatty.jpg","publicURL":"/static/a92cd25e7fe77c940c3b8b961a548c14/Chatty.jpg","imageMeta":{"width":648,"height":648},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAEDBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHJz9lBmQL6QgH/xAAbEAABBQEBAAAAAAAAAAAAAAABAAIDERIQIv/aAAgBAQABBQIny8UVG7RnrS0c8//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIBBQAAAAAAAAAAAAAAAAABECAhYXGR/9oACAEBAAY/AnwxGizp/8QAHBABAAEFAQEAAAAAAAAAAAAAASEAEDFBURFh/9oACAEBAAE/IQNa5VhhPqwcmVQJHyTlnept/9oADAMBAAIAAwAAABDQzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAeEAEAAgICAwEAAAAAAAAAAAABABEhQRBxMWGBwf/aAAgBAQABPxB+0xsG0+S4tlVvCC6V1PZ3DZVsr9cKJjrES+e+P//Z","aspectRatio":1,"src":"/static/a92cd25e7fe77c940c3b8b961a548c14/31709/Chatty.jpg","srcSet":"/static/a92cd25e7fe77c940c3b8b961a548c14/f340b/Chatty.jpg 28w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/22d64/Chatty.jpg 55w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/31709/Chatty.jpg 110w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/aa249/Chatty.jpg 165w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/0dc33/Chatty.jpg 220w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/5fcae/Chatty.jpg 648w","srcWebp":"/static/a92cd25e7fe77c940c3b8b961a548c14/8678c/Chatty.webp","srcSetWebp":"/static/a92cd25e7fe77c940c3b8b961a548c14/59cda/Chatty.webp 28w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/7da75/Chatty.webp 55w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/8678c/Chatty.webp 110w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/f282e/Chatty.webp 165w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/a7b21/Chatty.webp 220w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/891ac/Chatty.webp 648w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"React Native [https://reactnative.dev] is a cross-platform mobile application\ndevelopment framework. The main advantage of this technology is that you can use\nthe same code base on all platforms without any changes. This makes your app\nmore scalable and cost-effective because you don’t have to write separate codes\nfor each device which will save time and money. \n\nReact Native developers [https://andela.com/react-native-developers/] are in\nhigh demand these days because it has become one of the most popular\ntechnologies among web designers, front end engineers, and back-end programmers.\nIf you are considering learning how to build android or iOS apps using React\nNative then this article is for you.\n\nWhat Is React Native?\nBefore we can talk about becoming a React Native developer, let us first take a\nlook at what exactly React Native is. It's a framework that allows developers to\nbuild cross-platform applications by combining web technologies like JavaScript\nalong with native code written specifically for iOS or Android devices. \n\nThe reason why so many people have been switching over to React Native is that\nit has made creating cross-platform mobile apps much easier than ever before.\nWith React Native, you no longer need to write separate codes for each operating\nsystem. Instead, you just develop one set of code that works across multiple\nplatforms.\n\nTips for Becoming a React Native Developer\nIf you're thinking about learning to develop apps using React Native, there are\nseveral things you have to keep in mind. These tips will help you get started\nwith the framework and become an expert developer in no time:\n\nLearn JavaScript First\nBefore starting on your journey of becoming a React Native developer, it's\nimportant that you learn how to program in general. This is because React Native\nuses JavaScript as its primary language. If you don't know JavaScript well\nenough, then this could be quite difficult for you. Learning JavaScript before\ngetting into React Native can save you from having to deal with some common\nissues when developing apps.\n\nYou can learn JavaScript by reading books or online tutorials. There are many\ngreat resources available and the best way to find them is to search Google. You\nshould also try to get familiar with other programming languages such as Java,\nPython, and C so that you have an idea about what they're like. The more\nexperience you gain, the better prepared you'll be for learning React Native.\n\n[https://edabit.com/challenges/javascript?ref=shahednasser1&tap_a=86255-ae3f95]\nUnderstand What Makes React Native Different\nWhen compared to other mobile app development platforms, React Native has a few\nunique features which make it stand apart. One such feature is that it allows\ndevelopers to use native components, instead of building their own custom ones.\nAnd since React Native uses JavaScript as its primary language, you can build\napps for iOS and Android using the same codebase. This makes your life much\neasier when developing an application because you don't have to write separate\ncodes for each platform.\n\nFamiliarize Yourself with the Official Documentation\nThe official docs contain all sorts of information regarding everything related\nto React Native. You should definitely spend time reading through them so that\nyou understand every aspect of the platform. They also provide tutorials and\nguides for beginners who want to start off right away.\n\nWatching or reading a React Native tutorial\n[https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/] \nwill also give you a good understanding of the basics of the framework. It will\nteach you how to create basic UI elements and connect them together. Once you've\nmastered these concepts, you can move on to advanced topics such as animations,\ndata binding, and more.\n\nLearning About Navigation Concepts\nAs mentioned earlier, one of the most interesting aspects of React Native is\nthat it provides access to many built-in navigation concepts. Both these methods\nwork very similarly to those used in regular web applications. However, they\nallow us to build more complex user interfaces without needing to write much\ncode ourselves.\n\nLearning about different navigation concepts can be a bit overwhelming at first\nbut once you understand them and how they are implemented, using them becomes\nsecond nature. This will help you get started with building your own apps\nfaster.\n\nChallenge Yourself to Complete React Native Projects\nLearning any skill takes practice. So if you really want to master something,\nyou need to put in lots of effort. To do this, challenge yourself to work on\nvarious projects with React Native. Try creating simple games or chat\napplications. Doing so will not only improve your skills but also expose you to\nnew ideas and techniques.\n\nIf you feel stuck at any point while working on a particular task, reach out to\nyour friends or colleagues. Ask them questions and see whether they can help you\nfigure things out. Chances are, someone else might already have faced similar\nproblems and solved them. In addition, asking people around you helps you\ndevelop confidence in your abilities.\n\nConclusion\nReact Native is one of the most popular cross-platform frameworks that will\nallow you to create beautiful, highly performant apps, as well as find jobs\neasily in the market. Start your journey now\n[https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/]!","html":"
React Native is a cross-platform mobile application development framework. The main advantage of this technology is that you can use the same code base on all platforms without any changes. This makes your app more scalable and cost-effective because you don’t have to write separate codes for each device which will save time and money.
React Native developers are in high demand these days because it has become one of the most popular technologies among web designers, front end engineers, and back-end programmers. If you are considering learning how to build android or iOS apps using React Native then this article is for you.
What Is React Native?
Before we can talk about becoming a React Native developer, let us first take a look at what exactly React Native is. It's a framework that allows developers to build cross-platform applications by combining web technologies like JavaScript along with native code written specifically for iOS or Android devices.
The reason why so many people have been switching over to React Native is that it has made creating cross-platform mobile apps much easier than ever before. With React Native, you no longer need to write separate codes for each operating system. Instead, you just develop one set of code that works across multiple platforms.
Tips for Becoming a React Native Developer
If you're thinking about learning to develop apps using React Native, there are several things you have to keep in mind. These tips will help you get started with the framework and become an expert developer in no time:
Learn JavaScript First
Before starting on your journey of becoming a React Native developer, it's important that you learn how to program in general. This is because React Native uses JavaScript as its primary language. If you don't know JavaScript well enough, then this could be quite difficult for you. Learning JavaScript before getting into React Native can save you from having to deal with some common issues when developing apps.
You can learn JavaScript by reading books or online tutorials. There are many great resources available and the best way to find them is to search Google. You should also try to get familiar with other programming languages such as Java, Python, and C so that you have an idea about what they're like. The more experience you gain, the better prepared you'll be for learning React Native.
Understand What Makes React Native Different
When compared to other mobile app development platforms, React Native has a few unique features which make it stand apart. One such feature is that it allows developers to use native components, instead of building their own custom ones. And since React Native uses JavaScript as its primary language, you can build apps for iOS and Android using the same codebase. This makes your life much easier when developing an application because you don't have to write separate codes for each platform.
Familiarize Yourself with the Official Documentation
The official docs contain all sorts of information regarding everything related to React Native. You should definitely spend time reading through them so that you understand every aspect of the platform. They also provide tutorials and guides for beginners who want to start off right away.
Watching or reading a React Native tutorial will also give you a good understanding of the basics of the framework. It will teach you how to create basic UI elements and connect them together. Once you've mastered these concepts, you can move on to advanced topics such as animations, data binding, and more.
Learning About Navigation Concepts
As mentioned earlier, one of the most interesting aspects of React Native is that it provides access to many built-in navigation concepts. Both these methods work very similarly to those used in regular web applications. However, they allow us to build more complex user interfaces without needing to write much code ourselves.
Learning about different navigation concepts can be a bit overwhelming at first but once you understand them and how they are implemented, using them becomes second nature. This will help you get started with building your own apps faster.
Challenge Yourself to Complete React Native Projects
Learning any skill takes practice. So if you really want to master something, you need to put in lots of effort. To do this, challenge yourself to work on various projects with React Native. Try creating simple games or chat applications. Doing so will not only improve your skills but also expose you to new ideas and techniques.
If you feel stuck at any point while working on a particular task, reach out to your friends or colleagues. Ask them questions and see whether they can help you figure things out. Chances are, someone else might already have faced similar problems and solved them. In addition, asking people around you helps you develop confidence in your abilities.
Conclusion
React Native is one of the most popular cross-platform frameworks that will allow you to create beautiful, highly performant apps, as well as find jobs easily in the market. Start your journey now!
React Native is a cross-platform mobile application development framework. The main advantage of this technology is that you can use the same code base on all platforms without any changes. This makes your app more scalable and cost-effective because you don’t have to write separate codes for each device which will save time and money.
React Native developers are in high demand these days because it has become one of the most popular technologies among web designers, front end engineers, and back-end programmers. If you are considering learning how to build android or iOS apps using React Native then this article is for you.
What Is React Native?
Before we can talk about becoming a React Native developer, let us first take a look at what exactly React Native is. It's a framework that allows developers to build cross-platform applications by combining web technologies like JavaScript along with native code written specifically for iOS or Android devices.
The reason why so many people have been switching over to React Native is that it has made creating cross-platform mobile apps much easier than ever before. With React Native, you no longer need to write separate codes for each operating system. Instead, you just develop one set of code that works across multiple platforms.
Tips for Becoming a React Native Developer
If you're thinking about learning to develop apps using React Native, there are several things you have to keep in mind. These tips will help you get started with the framework and become an expert developer in no time:
Learn JavaScript First
Before starting on your journey of becoming a React Native developer, it's important that you learn how to program in general. This is because React Native uses JavaScript as its primary language. If you don't know JavaScript well enough, then this could be quite difficult for you. Learning JavaScript before getting into React Native can save you from having to deal with some common issues when developing apps.
You can learn JavaScript by reading books or online tutorials. There are many great resources available and the best way to find them is to search Google. You should also try to get familiar with other programming languages such as Java, Python, and C so that you have an idea about what they're like. The more experience you gain, the better prepared you'll be for learning React Native.
Understand What Makes React Native Different
When compared to other mobile app development platforms, React Native has a few unique features which make it stand apart. One such feature is that it allows developers to use native components, instead of building their own custom ones. And since React Native uses JavaScript as its primary language, you can build apps for iOS and Android using the same codebase. This makes your life much easier when developing an application because you don't have to write separate codes for each platform.
Familiarize Yourself with the Official Documentation
The official docs contain all sorts of information regarding everything related to React Native. You should definitely spend time reading through them so that you understand every aspect of the platform. They also provide tutorials and guides for beginners who want to start off right away.
Watching or reading a React Native tutorial will also give you a good understanding of the basics of the framework. It will teach you how to create basic UI elements and connect them together. Once you've mastered these concepts, you can move on to advanced topics such as animations, data binding, and more.
Learning About Navigation Concepts
As mentioned earlier, one of the most interesting aspects of React Native is that it provides access to many built-in navigation concepts. Both these methods work very similarly to those used in regular web applications. However, they allow us to build more complex user interfaces without needing to write much code ourselves.
Learning about different navigation concepts can be a bit overwhelming at first but once you understand them and how they are implemented, using them becomes second nature. This will help you get started with building your own apps faster.
Challenge Yourself to Complete React Native Projects
Learning any skill takes practice. So if you really want to master something, you need to put in lots of effort. To do this, challenge yourself to work on various projects with React Native. Try creating simple games or chat applications. Doing so will not only improve your skills but also expose you to new ideas and techniques.
If you feel stuck at any point while working on a particular task, reach out to your friends or colleagues. Ask them questions and see whether they can help you figure things out. Chances are, someone else might already have faced similar problems and solved them. In addition, asking people around you helps you develop confidence in your abilities.
Conclusion
React Native is one of the most popular cross-platform frameworks that will allow you to create beautiful, highly performant apps, as well as find jobs easily in the market. Start your journey now!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://reactnative.dev"},"children":[{"type":"text","value":"React Native"}]},{"type":"text","value":" is a cross-platform mobile application development framework. The main advantage of this technology is that you can use the same code base on all platforms without any changes. This makes your app more scalable and cost-effective because you don’t have to write separate codes for each device which will save time and money. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://andela.com/react-native-developers/"},"children":[{"type":"text","value":"React Native developers"}]},{"type":"text","value":" are in high demand these days because it has become one of the most popular technologies among web designers, front end engineers, and back-end programmers. If you are considering learning how to build android or iOS apps using React Native then this article is for you."}]},{"type":"element","tagName":"h2","properties":{"id":"what-is-react-native"},"children":[{"type":"text","value":"What Is React Native?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before we can talk about becoming a React Native developer, let us first take a look at what exactly React Native is. It's a framework that allows developers to build cross-platform applications by combining web technologies like JavaScript along with native code written specifically for iOS or Android devices. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The reason why so many people have been switching over to React Native is that it has made creating cross-platform mobile apps much easier than ever before. With React Native, you no longer need to write separate codes for each operating system. Instead, you just develop one set of code that works across multiple platforms."}]},{"type":"element","tagName":"h2","properties":{"id":"tips-for-becoming-a-react-native-developer"},"children":[{"type":"text","value":"Tips for Becoming a React Native Developer"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're thinking about learning to develop apps using React Native, there are several things you have to keep in mind. These tips will help you get started with the framework and become an expert developer in no time:"}]},{"type":"element","tagName":"h3","properties":{"id":"learn-javascript-first"},"children":[{"type":"text","value":"Learn JavaScript First"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before starting on your journey of becoming a React Native developer, it's important that you learn how to program in general. This is because React Native uses JavaScript as its primary language. If you don't know JavaScript well enough, then this could be quite difficult for you. Learning JavaScript before getting into React Native can save you from having to deal with some common issues when developing apps."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can learn JavaScript by reading books or online tutorials. There are many great resources available and the best way to find them is to search Google. You should also try to get familiar with other programming languages such as Java, Python, and C so that you have an idea about what they're like. The more experience you gain, the better prepared you'll be for learning React Native."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"a","properties":{"href":"https://edabit.com/challenges/javascript?ref=shahednasser1&tap_a=86255-ae3f95","target":"_BLANK","rel":["nofollow"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://static.tapfiliate.com/5fcf4fb9056cd927104425.png?a=86255-ae3f95&s=2171241-632e37","border":0},"children":[]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h3","properties":{"id":"understand-what-makes-react-native-different"},"children":[{"type":"text","value":"Understand What Makes React Native Different"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When compared to other mobile app development platforms, React Native has a few unique features which make it stand apart. One such feature is that it allows developers to use native components, instead of building their own custom ones. And since React Native uses JavaScript as its primary language, you can build apps for iOS and Android using the same codebase. This makes your life much easier when developing an application because you don't have to write separate codes for each platform."}]},{"type":"element","tagName":"h3","properties":{"id":"familiarize-yourself-with-the-official-documentation"},"children":[{"type":"text","value":"Familiarize Yourself with the Official Documentation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The official docs contain all sorts of information regarding everything related to React Native. You should definitely spend time reading through them so that you understand every aspect of the platform. They also provide tutorials and guides for beginners who want to start off right away."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Watching or reading a "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/"},"children":[{"type":"text","value":"React Native tutorial"}]},{"type":"text","value":" will also give you a good understanding of the basics of the framework. It will teach you how to create basic UI elements and connect them together. Once you've mastered these concepts, you can move on to advanced topics such as animations, data binding, and more."}]},{"type":"element","tagName":"h3","properties":{"id":"learning-about-navigation-concepts"},"children":[{"type":"text","value":"Learning About Navigation Concepts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned earlier, one of the most interesting aspects of React Native is that it provides access to many built-in navigation concepts. Both these methods work very similarly to those used in regular web applications. However, they allow us to build more complex user interfaces without needing to write much code ourselves."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Learning about different navigation concepts can be a bit overwhelming at first but once you understand them and how they are implemented, using them becomes second nature. This will help you get started with building your own apps faster."}]},{"type":"element","tagName":"h3","properties":{"id":"challenge-yourself-to-complete-react-native-projects"},"children":[{"type":"text","value":"Challenge Yourself to Complete React Native Projects"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Learning any skill takes practice. So if you really want to master something, you need to put in lots of effort. To do this, challenge yourself to work on various projects with React Native. Try creating simple games or chat applications. Doing so will not only improve your skills but also expose you to new ideas and techniques."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you feel stuck at any point while working on a particular task, reach out to your friends or colleagues. Ask them questions and see whether they can help you figure things out. Chances are, someone else might already have faced similar problems and solved them. In addition, asking people around you helps you develop confidence in your abilities."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React Native is one of the most popular cross-platform frameworks that will allow you to create beautiful, highly performant apps, as well as find jobs easily in the market. "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/"},"children":[{"type":"text","value":"Start your journey now"}]},{"type":"text","value":"!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"what-is-react-native","heading":"What Is React Native?"},{"id":"tips-for-becoming-a-react-native-developer","heading":"Tips for Becoming a React Native Developer","items":[{"id":"learn-javascript-first","heading":"Learn JavaScript First"},{"id":"understand-what-makes-react-native-different","heading":"Understand What Makes React Native Different"},{"id":"familiarize-yourself-with-the-official-documentation","heading":"Familiarize Yourself with the Official Documentation"},{"id":"learning-about-navigation-concepts","heading":"Learning About Navigation Concepts"},{"id":"challenge-yourself-to-complete-react-native-projects","heading":"Challenge Yourself to Complete React Native Projects"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","publicURL":"/static/59e21af85472edb4c0a7f8177d97000f/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","imageMeta":{"width":1920,"height":1282},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGtk3QNjA//xAAZEAACAwEAAAAAAAAAAAAAAAACEQADEAT/2gAIAQEAAQUCI3AJ5zqysRWf/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BSf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAbEAACAQUAAAAAAAAAAAAAAAAAAREQITFBcf/aAAgBAQAGPwJRJk2JtX7X/8QAGxAAAwEAAwEAAAAAAAAAAAAAAAERIUFRYeH/2gAIAQEAAT8hTJ3u2Ej9xjz6K7cKL8edMp//2gAMAwEAAgADAAAAEDQP/8QAFhEAAwAAAAAAAAAAAAAAAAAAARBB/9oACAEDAQE/EKhf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARBB/9oACAECAQE/EDDP/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFBkXH/2gAIAQEAAT8QOCuSqryAK9CDRs64iUFvDRQoodWancNFXNaV7Pif/9k=","aspectRatio":1.4942528735632183,"src":"/static/59e21af85472edb4c0a7f8177d97000f/d5c54/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","srcSet":"/static/59e21af85472edb4c0a7f8177d97000f/65d8c/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 260w,\n/static/59e21af85472edb4c0a7f8177d97000f/c5f21/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 520w,\n/static/59e21af85472edb4c0a7f8177d97000f/d5c54/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 1040w,\n/static/59e21af85472edb4c0a7f8177d97000f/81a53/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 1560w,\n/static/59e21af85472edb4c0a7f8177d97000f/74fd5/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 1920w","srcWebp":"/static/59e21af85472edb4c0a7f8177d97000f/e4875/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp","srcSetWebp":"/static/59e21af85472edb4c0a7f8177d97000f/dc8f3/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 260w,\n/static/59e21af85472edb4c0a7f8177d97000f/2db4b/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 520w,\n/static/59e21af85472edb4c0a7f8177d97000f/e4875/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 1040w,\n/static/59e21af85472edb4c0a7f8177d97000f/f5845/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 1560w,\n/static/59e21af85472edb4c0a7f8177d97000f/6833b/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 1920w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"ghostPost":{"id":"Ghost__Post__615c9bad3eea8f060129b2cd","title":"5 Tips To Become A React Native Developer","slug":"5-tips-to-become-a-react-native-developer","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/10/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","excerpt":"If you are considering learning how to build android or iOS apps using React Native then this article is for you.","custom_excerpt":"If you are considering learning how to build android or iOS apps using React Native then this article is for you.","visibility":"public","created_at_pretty":"5 Oct 2021","published_at_pretty":"7 Oct 2021","updated_at_pretty":"7 Oct 2021","created_at":"2021-10-05T18:38:37.000+00:00","published_at":"2021-10-07T13:31:24.000+00:00","updated_at":"2021-10-07T13:31:24.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"chatty","url":"https://backend.shahednasser.com/author/chatty/","name":"Chatty Garrate","bio":"Chatty is a freelance writer from Manila. Aside from her job as a language evaluator for local and international students, she enjoys writing about various topics such as technology and business.","cover_image":null,"profile_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Chatty.jpg","location":null,"website":"http://www.linkedin.com/in/chatty-garrate1","twitter":"@ChattyGarrate","facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"chatty","url":"https://backend.shahednasser.com/author/chatty/","name":"Chatty Garrate","bio":"Chatty is a freelance writer from Manila. Aside from her job as a language evaluator for local and international students, she enjoys writing about various topics such as technology and business.","cover_image":null,"profile_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Chatty.jpg","location":null,"website":"http://www.linkedin.com/in/chatty-garrate1","twitter":"@ChattyGarrate","facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Chatty.jpg","publicURL":"/static/a92cd25e7fe77c940c3b8b961a548c14/Chatty.jpg","imageMeta":{"width":648,"height":648},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAEDBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHJz9lBmQL6QgH/xAAbEAABBQEBAAAAAAAAAAAAAAABAAIDERIQIv/aAAgBAQABBQIny8UVG7RnrS0c8//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIBBQAAAAAAAAAAAAAAAAABECAhYXGR/9oACAEBAAY/AnwxGizp/8QAHBABAAEFAQEAAAAAAAAAAAAAASEAEDFBURFh/9oACAEBAAE/IQNa5VhhPqwcmVQJHyTlnept/9oADAMBAAIAAwAAABDQzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAeEAEAAgICAwEAAAAAAAAAAAABABEhQRBxMWGBwf/aAAgBAQABPxB+0xsG0+S4tlVvCC6V1PZ3DZVsr9cKJjrES+e+P//Z","aspectRatio":1,"src":"/static/a92cd25e7fe77c940c3b8b961a548c14/31709/Chatty.jpg","srcSet":"/static/a92cd25e7fe77c940c3b8b961a548c14/f340b/Chatty.jpg 28w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/22d64/Chatty.jpg 55w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/31709/Chatty.jpg 110w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/aa249/Chatty.jpg 165w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/0dc33/Chatty.jpg 220w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/5fcae/Chatty.jpg 648w","srcWebp":"/static/a92cd25e7fe77c940c3b8b961a548c14/8678c/Chatty.webp","srcSetWebp":"/static/a92cd25e7fe77c940c3b8b961a548c14/59cda/Chatty.webp 28w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/7da75/Chatty.webp 55w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/8678c/Chatty.webp 110w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/f282e/Chatty.webp 165w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/a7b21/Chatty.webp 220w,\n/static/a92cd25e7fe77c940c3b8b961a548c14/891ac/Chatty.webp 648w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"React Native [https://reactnative.dev] is a cross-platform mobile application\ndevelopment framework. The main advantage of this technology is that you can use\nthe same code base on all platforms without any changes. This makes your app\nmore scalable and cost-effective because you don’t have to write separate codes\nfor each device which will save time and money. \n\nReact Native developers [https://andela.com/react-native-developers/] are in\nhigh demand these days because it has become one of the most popular\ntechnologies among web designers, front end engineers, and back-end programmers.\nIf you are considering learning how to build android or iOS apps using React\nNative then this article is for you.\n\nWhat Is React Native?\nBefore we can talk about becoming a React Native developer, let us first take a\nlook at what exactly React Native is. It's a framework that allows developers to\nbuild cross-platform applications by combining web technologies like JavaScript\nalong with native code written specifically for iOS or Android devices. \n\nThe reason why so many people have been switching over to React Native is that\nit has made creating cross-platform mobile apps much easier than ever before.\nWith React Native, you no longer need to write separate codes for each operating\nsystem. Instead, you just develop one set of code that works across multiple\nplatforms.\n\nTips for Becoming a React Native Developer\nIf you're thinking about learning to develop apps using React Native, there are\nseveral things you have to keep in mind. These tips will help you get started\nwith the framework and become an expert developer in no time:\n\nLearn JavaScript First\nBefore starting on your journey of becoming a React Native developer, it's\nimportant that you learn how to program in general. This is because React Native\nuses JavaScript as its primary language. If you don't know JavaScript well\nenough, then this could be quite difficult for you. Learning JavaScript before\ngetting into React Native can save you from having to deal with some common\nissues when developing apps.\n\nYou can learn JavaScript by reading books or online tutorials. There are many\ngreat resources available and the best way to find them is to search Google. You\nshould also try to get familiar with other programming languages such as Java,\nPython, and C so that you have an idea about what they're like. The more\nexperience you gain, the better prepared you'll be for learning React Native.\n\n[https://edabit.com/challenges/javascript?ref=shahednasser1&tap_a=86255-ae3f95]\nUnderstand What Makes React Native Different\nWhen compared to other mobile app development platforms, React Native has a few\nunique features which make it stand apart. One such feature is that it allows\ndevelopers to use native components, instead of building their own custom ones.\nAnd since React Native uses JavaScript as its primary language, you can build\napps for iOS and Android using the same codebase. This makes your life much\neasier when developing an application because you don't have to write separate\ncodes for each platform.\n\nFamiliarize Yourself with the Official Documentation\nThe official docs contain all sorts of information regarding everything related\nto React Native. You should definitely spend time reading through them so that\nyou understand every aspect of the platform. They also provide tutorials and\nguides for beginners who want to start off right away.\n\nWatching or reading a React Native tutorial\n[https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/] \nwill also give you a good understanding of the basics of the framework. It will\nteach you how to create basic UI elements and connect them together. Once you've\nmastered these concepts, you can move on to advanced topics such as animations,\ndata binding, and more.\n\nLearning About Navigation Concepts\nAs mentioned earlier, one of the most interesting aspects of React Native is\nthat it provides access to many built-in navigation concepts. Both these methods\nwork very similarly to those used in regular web applications. However, they\nallow us to build more complex user interfaces without needing to write much\ncode ourselves.\n\nLearning about different navigation concepts can be a bit overwhelming at first\nbut once you understand them and how they are implemented, using them becomes\nsecond nature. This will help you get started with building your own apps\nfaster.\n\nChallenge Yourself to Complete React Native Projects\nLearning any skill takes practice. So if you really want to master something,\nyou need to put in lots of effort. To do this, challenge yourself to work on\nvarious projects with React Native. Try creating simple games or chat\napplications. Doing so will not only improve your skills but also expose you to\nnew ideas and techniques.\n\nIf you feel stuck at any point while working on a particular task, reach out to\nyour friends or colleagues. Ask them questions and see whether they can help you\nfigure things out. Chances are, someone else might already have faced similar\nproblems and solved them. In addition, asking people around you helps you\ndevelop confidence in your abilities.\n\nConclusion\nReact Native is one of the most popular cross-platform frameworks that will\nallow you to create beautiful, highly performant apps, as well as find jobs\neasily in the market. Start your journey now\n[https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/]!","html":"
React Native is a cross-platform mobile application development framework. The main advantage of this technology is that you can use the same code base on all platforms without any changes. This makes your app more scalable and cost-effective because you don’t have to write separate codes for each device which will save time and money.
React Native developers are in high demand these days because it has become one of the most popular technologies among web designers, front end engineers, and back-end programmers. If you are considering learning how to build android or iOS apps using React Native then this article is for you.
What Is React Native?
Before we can talk about becoming a React Native developer, let us first take a look at what exactly React Native is. It's a framework that allows developers to build cross-platform applications by combining web technologies like JavaScript along with native code written specifically for iOS or Android devices.
The reason why so many people have been switching over to React Native is that it has made creating cross-platform mobile apps much easier than ever before. With React Native, you no longer need to write separate codes for each operating system. Instead, you just develop one set of code that works across multiple platforms.
Tips for Becoming a React Native Developer
If you're thinking about learning to develop apps using React Native, there are several things you have to keep in mind. These tips will help you get started with the framework and become an expert developer in no time:
Learn JavaScript First
Before starting on your journey of becoming a React Native developer, it's important that you learn how to program in general. This is because React Native uses JavaScript as its primary language. If you don't know JavaScript well enough, then this could be quite difficult for you. Learning JavaScript before getting into React Native can save you from having to deal with some common issues when developing apps.
You can learn JavaScript by reading books or online tutorials. There are many great resources available and the best way to find them is to search Google. You should also try to get familiar with other programming languages such as Java, Python, and C so that you have an idea about what they're like. The more experience you gain, the better prepared you'll be for learning React Native.
Understand What Makes React Native Different
When compared to other mobile app development platforms, React Native has a few unique features which make it stand apart. One such feature is that it allows developers to use native components, instead of building their own custom ones. And since React Native uses JavaScript as its primary language, you can build apps for iOS and Android using the same codebase. This makes your life much easier when developing an application because you don't have to write separate codes for each platform.
Familiarize Yourself with the Official Documentation
The official docs contain all sorts of information regarding everything related to React Native. You should definitely spend time reading through them so that you understand every aspect of the platform. They also provide tutorials and guides for beginners who want to start off right away.
Watching or reading a React Native tutorial will also give you a good understanding of the basics of the framework. It will teach you how to create basic UI elements and connect them together. Once you've mastered these concepts, you can move on to advanced topics such as animations, data binding, and more.
Learning About Navigation Concepts
As mentioned earlier, one of the most interesting aspects of React Native is that it provides access to many built-in navigation concepts. Both these methods work very similarly to those used in regular web applications. However, they allow us to build more complex user interfaces without needing to write much code ourselves.
Learning about different navigation concepts can be a bit overwhelming at first but once you understand them and how they are implemented, using them becomes second nature. This will help you get started with building your own apps faster.
Challenge Yourself to Complete React Native Projects
Learning any skill takes practice. So if you really want to master something, you need to put in lots of effort. To do this, challenge yourself to work on various projects with React Native. Try creating simple games or chat applications. Doing so will not only improve your skills but also expose you to new ideas and techniques.
If you feel stuck at any point while working on a particular task, reach out to your friends or colleagues. Ask them questions and see whether they can help you figure things out. Chances are, someone else might already have faced similar problems and solved them. In addition, asking people around you helps you develop confidence in your abilities.
Conclusion
React Native is one of the most popular cross-platform frameworks that will allow you to create beautiful, highly performant apps, as well as find jobs easily in the market. Start your journey now!
React Native is a cross-platform mobile application development framework. The main advantage of this technology is that you can use the same code base on all platforms without any changes. This makes your app more scalable and cost-effective because you don’t have to write separate codes for each device which will save time and money.
React Native developers are in high demand these days because it has become one of the most popular technologies among web designers, front end engineers, and back-end programmers. If you are considering learning how to build android or iOS apps using React Native then this article is for you.
What Is React Native?
Before we can talk about becoming a React Native developer, let us first take a look at what exactly React Native is. It's a framework that allows developers to build cross-platform applications by combining web technologies like JavaScript along with native code written specifically for iOS or Android devices.
The reason why so many people have been switching over to React Native is that it has made creating cross-platform mobile apps much easier than ever before. With React Native, you no longer need to write separate codes for each operating system. Instead, you just develop one set of code that works across multiple platforms.
Tips for Becoming a React Native Developer
If you're thinking about learning to develop apps using React Native, there are several things you have to keep in mind. These tips will help you get started with the framework and become an expert developer in no time:
Learn JavaScript First
Before starting on your journey of becoming a React Native developer, it's important that you learn how to program in general. This is because React Native uses JavaScript as its primary language. If you don't know JavaScript well enough, then this could be quite difficult for you. Learning JavaScript before getting into React Native can save you from having to deal with some common issues when developing apps.
You can learn JavaScript by reading books or online tutorials. There are many great resources available and the best way to find them is to search Google. You should also try to get familiar with other programming languages such as Java, Python, and C so that you have an idea about what they're like. The more experience you gain, the better prepared you'll be for learning React Native.
Understand What Makes React Native Different
When compared to other mobile app development platforms, React Native has a few unique features which make it stand apart. One such feature is that it allows developers to use native components, instead of building their own custom ones. And since React Native uses JavaScript as its primary language, you can build apps for iOS and Android using the same codebase. This makes your life much easier when developing an application because you don't have to write separate codes for each platform.
Familiarize Yourself with the Official Documentation
The official docs contain all sorts of information regarding everything related to React Native. You should definitely spend time reading through them so that you understand every aspect of the platform. They also provide tutorials and guides for beginners who want to start off right away.
Watching or reading a React Native tutorial will also give you a good understanding of the basics of the framework. It will teach you how to create basic UI elements and connect them together. Once you've mastered these concepts, you can move on to advanced topics such as animations, data binding, and more.
Learning About Navigation Concepts
As mentioned earlier, one of the most interesting aspects of React Native is that it provides access to many built-in navigation concepts. Both these methods work very similarly to those used in regular web applications. However, they allow us to build more complex user interfaces without needing to write much code ourselves.
Learning about different navigation concepts can be a bit overwhelming at first but once you understand them and how they are implemented, using them becomes second nature. This will help you get started with building your own apps faster.
Challenge Yourself to Complete React Native Projects
Learning any skill takes practice. So if you really want to master something, you need to put in lots of effort. To do this, challenge yourself to work on various projects with React Native. Try creating simple games or chat applications. Doing so will not only improve your skills but also expose you to new ideas and techniques.
If you feel stuck at any point while working on a particular task, reach out to your friends or colleagues. Ask them questions and see whether they can help you figure things out. Chances are, someone else might already have faced similar problems and solved them. In addition, asking people around you helps you develop confidence in your abilities.
Conclusion
React Native is one of the most popular cross-platform frameworks that will allow you to create beautiful, highly performant apps, as well as find jobs easily in the market. Start your journey now!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://reactnative.dev"},"children":[{"type":"text","value":"React Native"}]},{"type":"text","value":" is a cross-platform mobile application development framework. The main advantage of this technology is that you can use the same code base on all platforms without any changes. This makes your app more scalable and cost-effective because you don’t have to write separate codes for each device which will save time and money. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://andela.com/react-native-developers/"},"children":[{"type":"text","value":"React Native developers"}]},{"type":"text","value":" are in high demand these days because it has become one of the most popular technologies among web designers, front end engineers, and back-end programmers. If you are considering learning how to build android or iOS apps using React Native then this article is for you."}]},{"type":"element","tagName":"h2","properties":{"id":"what-is-react-native"},"children":[{"type":"text","value":"What Is React Native?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before we can talk about becoming a React Native developer, let us first take a look at what exactly React Native is. It's a framework that allows developers to build cross-platform applications by combining web technologies like JavaScript along with native code written specifically for iOS or Android devices. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The reason why so many people have been switching over to React Native is that it has made creating cross-platform mobile apps much easier than ever before. With React Native, you no longer need to write separate codes for each operating system. Instead, you just develop one set of code that works across multiple platforms."}]},{"type":"element","tagName":"h2","properties":{"id":"tips-for-becoming-a-react-native-developer"},"children":[{"type":"text","value":"Tips for Becoming a React Native Developer"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're thinking about learning to develop apps using React Native, there are several things you have to keep in mind. These tips will help you get started with the framework and become an expert developer in no time:"}]},{"type":"element","tagName":"h3","properties":{"id":"learn-javascript-first"},"children":[{"type":"text","value":"Learn JavaScript First"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before starting on your journey of becoming a React Native developer, it's important that you learn how to program in general. This is because React Native uses JavaScript as its primary language. If you don't know JavaScript well enough, then this could be quite difficult for you. Learning JavaScript before getting into React Native can save you from having to deal with some common issues when developing apps."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can learn JavaScript by reading books or online tutorials. There are many great resources available and the best way to find them is to search Google. You should also try to get familiar with other programming languages such as Java, Python, and C so that you have an idea about what they're like. The more experience you gain, the better prepared you'll be for learning React Native."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"a","properties":{"href":"https://edabit.com/challenges/javascript?ref=shahednasser1&tap_a=86255-ae3f95","target":"_BLANK","rel":["nofollow"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://static.tapfiliate.com/5fcf4fb9056cd927104425.png?a=86255-ae3f95&s=2171241-632e37","border":0},"children":[]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h3","properties":{"id":"understand-what-makes-react-native-different"},"children":[{"type":"text","value":"Understand What Makes React Native Different"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When compared to other mobile app development platforms, React Native has a few unique features which make it stand apart. One such feature is that it allows developers to use native components, instead of building their own custom ones. And since React Native uses JavaScript as its primary language, you can build apps for iOS and Android using the same codebase. This makes your life much easier when developing an application because you don't have to write separate codes for each platform."}]},{"type":"element","tagName":"h3","properties":{"id":"familiarize-yourself-with-the-official-documentation"},"children":[{"type":"text","value":"Familiarize Yourself with the Official Documentation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The official docs contain all sorts of information regarding everything related to React Native. You should definitely spend time reading through them so that you understand every aspect of the platform. They also provide tutorials and guides for beginners who want to start off right away."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Watching or reading a "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/"},"children":[{"type":"text","value":"React Native tutorial"}]},{"type":"text","value":" will also give you a good understanding of the basics of the framework. It will teach you how to create basic UI elements and connect them together. Once you've mastered these concepts, you can move on to advanced topics such as animations, data binding, and more."}]},{"type":"element","tagName":"h3","properties":{"id":"learning-about-navigation-concepts"},"children":[{"type":"text","value":"Learning About Navigation Concepts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned earlier, one of the most interesting aspects of React Native is that it provides access to many built-in navigation concepts. Both these methods work very similarly to those used in regular web applications. However, they allow us to build more complex user interfaces without needing to write much code ourselves."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Learning about different navigation concepts can be a bit overwhelming at first but once you understand them and how they are implemented, using them becomes second nature. This will help you get started with building your own apps faster."}]},{"type":"element","tagName":"h3","properties":{"id":"challenge-yourself-to-complete-react-native-projects"},"children":[{"type":"text","value":"Challenge Yourself to Complete React Native Projects"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Learning any skill takes practice. So if you really want to master something, you need to put in lots of effort. To do this, challenge yourself to work on various projects with React Native. Try creating simple games or chat applications. Doing so will not only improve your skills but also expose you to new ideas and techniques."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you feel stuck at any point while working on a particular task, reach out to your friends or colleagues. Ask them questions and see whether they can help you figure things out. Chances are, someone else might already have faced similar problems and solved them. In addition, asking people around you helps you develop confidence in your abilities."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React Native is one of the most popular cross-platform frameworks that will allow you to create beautiful, highly performant apps, as well as find jobs easily in the market. "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/react-native-tutorial-create-your-first-app/"},"children":[{"type":"text","value":"Start your journey now"}]},{"type":"text","value":"!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"what-is-react-native","heading":"What Is React Native?"},{"id":"tips-for-becoming-a-react-native-developer","heading":"Tips for Becoming a React Native Developer","items":[{"id":"learn-javascript-first","heading":"Learn JavaScript First"},{"id":"understand-what-makes-react-native-different","heading":"Understand What Makes React Native Different"},{"id":"familiarize-yourself-with-the-official-documentation","heading":"Familiarize Yourself with the Official Documentation"},{"id":"learning-about-navigation-concepts","heading":"Learning About Navigation Concepts"},{"id":"challenge-yourself-to-complete-react-native-projects","heading":"Challenge Yourself to Complete React Native Projects"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","publicURL":"/static/59e21af85472edb4c0a7f8177d97000f/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","imageMeta":{"width":1920,"height":1282},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGtk3QNjA//xAAZEAACAwEAAAAAAAAAAAAAAAACEQADEAT/2gAIAQEAAQUCI3AJ5zqysRWf/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BSf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAbEAACAQUAAAAAAAAAAAAAAAAAAREQITFBcf/aAAgBAQAGPwJRJk2JtX7X/8QAGxAAAwEAAwEAAAAAAAAAAAAAAAERIUFRYeH/2gAIAQEAAT8hTJ3u2Ej9xjz6K7cKL8edMp//2gAMAwEAAgADAAAAEDQP/8QAFhEAAwAAAAAAAAAAAAAAAAAAARBB/9oACAEDAQE/EKhf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARBB/9oACAECAQE/EDDP/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFBkXH/2gAIAQEAAT8QOCuSqryAK9CDRs64iUFvDRQoodWancNFXNaV7Pif/9k=","aspectRatio":1.4942528735632183,"src":"/static/59e21af85472edb4c0a7f8177d97000f/d5c54/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg","srcSet":"/static/59e21af85472edb4c0a7f8177d97000f/65d8c/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 260w,\n/static/59e21af85472edb4c0a7f8177d97000f/c5f21/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 520w,\n/static/59e21af85472edb4c0a7f8177d97000f/d5c54/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 1040w,\n/static/59e21af85472edb4c0a7f8177d97000f/81a53/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 1560w,\n/static/59e21af85472edb4c0a7f8177d97000f/74fd5/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.jpg 1920w","srcWebp":"/static/59e21af85472edb4c0a7f8177d97000f/e4875/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp","srcSetWebp":"/static/59e21af85472edb4c0a7f8177d97000f/dc8f3/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 260w,\n/static/59e21af85472edb4c0a7f8177d97000f/2db4b/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 520w,\n/static/59e21af85472edb4c0a7f8177d97000f/e4875/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 1040w,\n/static/59e21af85472edb4c0a7f8177d97000f/f5845/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 1560w,\n/static/59e21af85472edb4c0a7f8177d97000f/6833b/christina-wocintechchat-com-R_W_9D-53lw-unsplash-2.webp 1920w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"id":"Ghost__Post__6161d15b3eea8f060129b2fc","title":"Medusa: Create A Fast and Highly Customizable E-Commerce Store","slug":"medusa-create-fast-and-highly-customizable-ecommerce-store","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/10/Fast-and-Highly-Customizable-E-commerce-Stores.png","excerpt":"In this article, we'll briefly take a look at Medusa's structure, its pros, and its cons.","custom_excerpt":"In this article, we'll briefly take a look at Medusa's structure, its pros, and its cons.","visibility":"public","created_at_pretty":"9 Oct 2021","published_at_pretty":"11 Oct 2021","updated_at_pretty":"24 Mar 2022","created_at":"2021-10-09T17:28:59.000+00:00","published_at":"2021-10-11T16:00:38.000+00:00","updated_at":"2022-03-24T17:40:38.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"reviews","url":"https://backend.shahednasser.com/tag/reviews/","name":"Reviews","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/pexels-jess-bailey-designs-2647794--1--2.jpg","description":"Reviews for some services, products, or companies. If interested in having your product or service reviewed, please check out the \"collaborate\" page.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"pexels-jess-bailey-designs-2647794--1--2.jpg","publicURL":"/static/9dbdb73d894862ceac3b9ca3d26610aa/pexels-jess-bailey-designs-2647794--1--2.jpg","imageMeta":{"width":3456,"height":4608},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB7zy0ACNJ1GYD/8QAGRAAAgMBAAAAAAAAAAAAAAAAAhABAxEg/9oACAEBAAEFAnuMaxjr/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAGRAAAgMBAAAAAAAAAAAAAAAAARARITFR/9oACAEBAAY/AnbnT0sP/8QAGhABAAIDAQAAAAAAAAAAAAAAARARACFxUf/aAAgBAQABPyGUG0HZRtfoXhvcLfc//9oADAMBAAIAAwAAABCf5s7/xAAVEQEBAAAAAAAAAAAAAAAAAAAREP/aAAgBAwEBPxAiz//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/ECQ//8QAHhABAAICAgMBAAAAAAAAAAAAAQARECFBUTFhocH/2gAIAQEAAT8QMVK4XtVBEsxoUO0++I1cTg/ZcQFdLfvV4Vuf/9k=","aspectRatio":0.7492795389048992,"src":"/static/9dbdb73d894862ceac3b9ca3d26610aa/d5c54/pexels-jess-bailey-designs-2647794--1--2.jpg","srcSet":"/static/9dbdb73d894862ceac3b9ca3d26610aa/65d8c/pexels-jess-bailey-designs-2647794--1--2.jpg 260w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/c5f21/pexels-jess-bailey-designs-2647794--1--2.jpg 520w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/d5c54/pexels-jess-bailey-designs-2647794--1--2.jpg 1040w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/81a53/pexels-jess-bailey-designs-2647794--1--2.jpg 1560w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/f734f/pexels-jess-bailey-designs-2647794--1--2.jpg 2080w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/f2665/pexels-jess-bailey-designs-2647794--1--2.jpg 3456w","srcWebp":"/static/9dbdb73d894862ceac3b9ca3d26610aa/e4875/pexels-jess-bailey-designs-2647794--1--2.webp","srcSetWebp":"/static/9dbdb73d894862ceac3b9ca3d26610aa/dc8f3/pexels-jess-bailey-designs-2647794--1--2.webp 260w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/2db4b/pexels-jess-bailey-designs-2647794--1--2.webp 520w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/e4875/pexels-jess-bailey-designs-2647794--1--2.webp 1040w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/f5845/pexels-jess-bailey-designs-2647794--1--2.webp 1560w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/ecdd3/pexels-jess-bailey-designs-2647794--1--2.webp 2080w,\n/static/9dbdb73d894862ceac3b9ca3d26610aa/63d3e/pexels-jess-bailey-designs-2647794--1--2.webp 3456w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"reviews","url":"https://backend.shahednasser.com/tag/reviews/","name":"Reviews","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/pexels-jess-bailey-designs-2647794--1--2.jpg","description":"Reviews for some services, products, or companies. If interested in having your product or service reviewed, please check out the \"collaborate\" page.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"ecommerce","url":"https://backend.shahednasser.com/tag/ecommerce/","name":"eCommerce","visibility":"public","feature_image":null,"description":"Learn more about eCommerce through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null}],"plaintext":"E-commerce platforms and frameworks are usually built on a complex architecture\nto provide you with the best features as a developer and as a business owner. \n\nAlthough this is good as they pack all useful features in one framework in the\nhopes no additional work needs to be done to launch a store, this can result in\nsome issues. The store can be slow which would require a set of external tools\nto make it faster and in some cases big hosting plans to ensure the customers\nget the best experience.\n\nIn addition to that, customizing an e-commerce store to fit your or your\nclient's needs using some platforms can be hard due to their tightly bound or\ncomplicated architecture.\n\nThis is where Medusa [https://www.medusajs.com/] comes in. Medusa is an\nopen-source headless commerce platform that aims to simplify how e-commerce\nplatforms are built and provide you with the highest level of customization you\ncan attain to build the e-commerce store you have in mind.\n\nIn this article, we'll briefly take a look at Medusa's structure and what it\nprovides, then we'll see what are some of its strong points and what are some of\nits cons that you should keep in mind before choosing Medusa.\n\nMedusa's Architecture \nMedusa as a full e-commerce system is split into 3 parts or 3 building blocks.\n\nThe core of Medusa is its backend [https://github.com/medusajs/medusa/]. The\nbackend exposes a REST API and connects directly to the database. The backend\nacts as the headless commerce, accessing and managing the store's data. The\nbackend is built with Node.js and express. By default and for development\npurposes it provides support for SQLite for the database, however, it also\nprovides support for PostgreSQL and Redis.\n\nNext comes the storefront. Medusa provides 2 storefronts that you can use, one\nbuilt with Next.js [https://github.com/medusajs/nextjs-starter-medusa] and\nanother with Gatsby.js [https://github.com/medusajs/gatsby-starter-medusa]. The\nstorefront connects to the backend and provides a slick design and a fast\nexperience for your users.\n\nThe last building block is the admin dashboard\n[https://github.com/medusajs/admin]. The admin dashboard connects to the backend\nand allows you to easily manage products, orders, customers, and settings.\n\nThe only building block required to use Medusa is the backend. With the backend,\nyou are able to customize your storefront as you see fit. Although Medusa\nprovides a storefront that you can use, you are not obligated to use it and can\ncreate your own. The same goes for the admin dashboard.\n\nE-Commerce Features\nIn this section, we'll cover some of the e-commerce features that Medusa\nprovides. These are the features that you should expect when you create a store\nwith Medusa.\n\nProduct Variants\nIn Medusa, you can easily add product variants like Size. You can also add\nmultiple prices for different currencies, manage the inventory of each variant,\nand more.\n\nDiscounts\nYou can add discounts or offer free shipping based on region. You can apply the\ndiscount as a percentage or as a fixed amount.\n\nGift Cards\nGift cards come built-in in Medusa. You can set an image for the gift card,\nmanage how much the gift card is worth and add different worths for a gift card,\nand more.\n\nMultiple Currencies\nIn Medusa, you can choose multiple currencies for your store and set a default\none.\n\nMultiple Regions\nMedusa allows you to add multiple regions, each having its own countries that\nare part of the region, payment method, shipping method, currency, and more.\n\nMedusa's Strong Points\nBlazingly Fast\nAs the frontend is decoupled from the backend, it removes the extra workload\nthat is usually done in tightly coupled systems.\n\nIn addition, static site generators like Gatsby can be used to generate the\nstorefront which would only need to connect to the backend through the REST\nAPIs.\n\nHighly Customizable\nThe decoupling of the frontend from the backend allows you to customize your\nstorefront freely. You can pick whatever programming language or framework you\nwish to use for the front end.\n\nThat's one of the benefits of headless commerce. You are free to focus on the\nfront end and get creative with it without the shackles of the backend.\n\nEasy Development\nOne of the cons of a lot of popular e-commerce platforms is that they get too\ncomplicated or hard to learn. So, although they provide a lot of features that\nare enough to launch a store as is if you need to do any custom development you\nmight need a lot of time to learn or understand its architecture.\n\nMedusa is easy to use. In addition to the REST APIs available by default, you\ncan easily add your own APIs. You can also create plugins to add missing\nfunctionalities or integrations that you need for your store.\n\nEasy Setup and Deployment\nYou can set up a medusa store locally in a matter of minutes. With just 3\ncommands at most, you can have the backend, frontend, and admin dashboard all\ninstalled and ready to use.\n\nSimilarly, its deployment is easy as well. Medusa's documentation already has a\nguide on how to deploy the backend on Heruko\n[https://docs.medusa-commerce.com/how-to/deploying-on-heroku], and the admin\ndashboard on Netlify\n[https://docs.medusa-commerce.com/how-to/deploying-admin-on-netlify].\n\nMedusa's Cons\nNo Internationalization\nAt the moment of writing this, Medusa does not support multiple languages.\nInternationalization is a very important aspect of e-commerce.\n\nSo, if your store needs to support languages other than the English language,\nthen Medusa is not a good option.\n\nMedusa's roadmap [https://roadmap.medusa-commerce.com/c/8-localizations-api] \nshows that Localization is a planned task. So, in the future, it should be\navailable.\n\nLack of Community Plugins\nAs Medusa is relatively new, at the moment there aren't many plugins created by\nthe community to add custom functionalities to a Medusa store.\n\nThis is especially essential when it comes to payment and shipment integrations.\nMedusa comes with support for Stripe by default. Any additional payment or\nshipment services integration needs to be developed by you.\n\nSimple Storefront\nAlthough we all love simplicity, the storefronts that Medusa currently provides\nare too simple. For example, although you can add multiple regions or currencies\nin the admin panel, there's no way to actually switch between them when using\nthe storefronts Medusa provides.\n\nThis won't be a problem if you're mostly relying on Medusa's headless commerce\nbackend, or you're looking to customize your frontend as necessary for you.\nHowever, if you need to use the frontend as is with additional development, then\nyou need to consider this first.\n\nWhen Should You Use Medusa\nMedusa is the perfect option if you are looking for headless commerce. With its\neasy setup, you can have a headless commerce backend ready in a few minutes.\n\nMedusa is also perfect if you're looking for complete freedom when designing\nyour storefront. Even if you use one of its storefronts, you can easily make\nchanges to the design as you find fitting.\n\nMedusa is also one of the very few options available to build e-commerce stores\nwith modern technologies.\n\nConclusion\nMedusa is still an evolving e-commerce platform. Yet, it still offers promising\nresults compared to a lot of other e-commerce platforms when it comes to\nperformance, customization, and other pros we've discussed throughout the\narticle.\n\nYou can get started with Medusa in minutes with their Quickstart documentation.\n[https://docs.medusa-commerce.com/quickstart/quick-start]","html":"
E-commerce platforms and frameworks are usually built on a complex architecture to provide you with the best features as a developer and as a business owner.
Although this is good as they pack all useful features in one framework in the hopes no additional work needs to be done to launch a store, this can result in some issues. The store can be slow which would require a set of external tools to make it faster and in some cases big hosting plans to ensure the customers get the best experience.
In addition to that, customizing an e-commerce store to fit your or your client's needs using some platforms can be hard due to their tightly bound or complicated architecture.
This is where Medusa comes in. Medusa is an open-source headless commerce platform that aims to simplify how e-commerce platforms are built and provide you with the highest level of customization you can attain to build the e-commerce store you have in mind.
In this article, we'll briefly take a look at Medusa's structure and what it provides, then we'll see what are some of its strong points and what are some of its cons that you should keep in mind before choosing Medusa.
Medusa's Architecture
Medusa as a full e-commerce system is split into 3 parts or 3 building blocks.
The core of Medusa is its backend. The backend exposes a REST API and connects directly to the database. The backend acts as the headless commerce, accessing and managing the store's data. The backend is built with Node.js and express. By default and for development purposes it provides support for SQLite for the database, however, it also provides support for PostgreSQL and Redis.
Next comes the storefront. Medusa provides 2 storefronts that you can use, one built with Next.js and another with Gatsby.js. The storefront connects to the backend and provides a slick design and a fast experience for your users.
The last building block is the admin dashboard. The admin dashboard connects to the backend and allows you to easily manage products, orders, customers, and settings.
The only building block required to use Medusa is the backend. With the backend, you are able to customize your storefront as you see fit. Although Medusa provides a storefront that you can use, you are not obligated to use it and can create your own. The same goes for the admin dashboard.
E-Commerce Features
In this section, we'll cover some of the e-commerce features that Medusa provides. These are the features that you should expect when you create a store with Medusa.
Product Variants
In Medusa, you can easily add product variants like Size. You can also add multiple prices for different currencies, manage the inventory of each variant, and more.
Discounts
You can add discounts or offer free shipping based on region. You can apply the discount as a percentage or as a fixed amount.
Gift Cards
Gift cards come built-in in Medusa. You can set an image for the gift card, manage how much the gift card is worth and add different worths for a gift card, and more.
Multiple Currencies
In Medusa, you can choose multiple currencies for your store and set a default one.
Multiple Regions
Medusa allows you to add multiple regions, each having its own countries that are part of the region, payment method, shipping method, currency, and more.
Medusa's Strong Points
Blazingly Fast
As the frontend is decoupled from the backend, it removes the extra workload that is usually done in tightly coupled systems.
In addition, static site generators like Gatsby can be used to generate the storefront which would only need to connect to the backend through the REST APIs.
Highly Customizable
The decoupling of the frontend from the backend allows you to customize your storefront freely. You can pick whatever programming language or framework you wish to use for the front end.
That's one of the benefits of headless commerce. You are free to focus on the front end and get creative with it without the shackles of the backend.
Easy Development
One of the cons of a lot of popular e-commerce platforms is that they get too complicated or hard to learn. So, although they provide a lot of features that are enough to launch a store as is if you need to do any custom development you might need a lot of time to learn or understand its architecture.
Medusa is easy to use. In addition to the REST APIs available by default, you can easily add your own APIs. You can also create plugins to add missing functionalities or integrations that you need for your store.
Easy Setup and Deployment
You can set up a medusa store locally in a matter of minutes. With just 3 commands at most, you can have the backend, frontend, and admin dashboard all installed and ready to use.
At the moment of writing this, Medusa does not support multiple languages. Internationalization is a very important aspect of e-commerce.
So, if your store needs to support languages other than the English language, then Medusa is not a good option.
Medusa's roadmap shows that Localization is a planned task. So, in the future, it should be available.
Lack of Community Plugins
As Medusa is relatively new, at the moment there aren't many plugins created by the community to add custom functionalities to a Medusa store.
This is especially essential when it comes to payment and shipment integrations. Medusa comes with support for Stripe by default. Any additional payment or shipment services integration needs to be developed by you.
Simple Storefront
Although we all love simplicity, the storefronts that Medusa currently provides are too simple. For example, although you can add multiple regions or currencies in the admin panel, there's no way to actually switch between them when using the storefronts Medusa provides.
This won't be a problem if you're mostly relying on Medusa's headless commerce backend, or you're looking to customize your frontend as necessary for you. However, if you need to use the frontend as is with additional development, then you need to consider this first.
When Should You Use Medusa
Medusa is the perfect option if you are looking for headless commerce. With its easy setup, you can have a headless commerce backend ready in a few minutes.
Medusa is also perfect if you're looking for complete freedom when designing your storefront. Even if you use one of its storefronts, you can easily make changes to the design as you find fitting.
Medusa is also one of the very few options available to build e-commerce stores with modern technologies.
Conclusion
Medusa is still an evolving e-commerce platform. Yet, it still offers promising results compared to a lot of other e-commerce platforms when it comes to performance, customization, and other pros we've discussed throughout the article.
E-commerce platforms and frameworks are usually built on a complex architecture to provide you with the best features as a developer and as a business owner.
Although this is good as they pack all useful features in one framework in the hopes no additional work needs to be done to launch a store, this can result in some issues. The store can be slow which would require a set of external tools to make it faster and in some cases big hosting plans to ensure the customers get the best experience.
In addition to that, customizing an e-commerce store to fit your or your client's needs using some platforms can be hard due to their tightly bound or complicated architecture.
This is where Medusa comes in. Medusa is an open-source headless commerce platform that aims to simplify how e-commerce platforms are built and provide you with the highest level of customization you can attain to build the e-commerce store you have in mind.
In this article, we'll briefly take a look at Medusa's structure and what it provides, then we'll see what are some of its strong points and what are some of its cons that you should keep in mind before choosing Medusa.
Medusa's Architecture
Medusa as a full e-commerce system is split into 3 parts or 3 building blocks.
The core of Medusa is its backend. The backend exposes a REST API and connects directly to the database. The backend acts as the headless commerce, accessing and managing the store's data. The backend is built with Node.js and express. By default and for development purposes it provides support for SQLite for the database, however, it also provides support for PostgreSQL and Redis.
Next comes the storefront. Medusa provides 2 storefronts that you can use, one built with Next.js and another with Gatsby.js. The storefront connects to the backend and provides a slick design and a fast experience for your users.
The last building block is the admin dashboard. The admin dashboard connects to the backend and allows you to easily manage products, orders, customers, and settings.
The only building block required to use Medusa is the backend. With the backend, you are able to customize your storefront as you see fit. Although Medusa provides a storefront that you can use, you are not obligated to use it and can create your own. The same goes for the admin dashboard.
E-Commerce Features
In this section, we'll cover some of the e-commerce features that Medusa provides. These are the features that you should expect when you create a store with Medusa.
Product Variants
In Medusa, you can easily add product variants like Size. You can also add multiple prices for different currencies, manage the inventory of each variant, and more.
Discounts
You can add discounts or offer free shipping based on region. You can apply the discount as a percentage or as a fixed amount.
Gift Cards
Gift cards come built-in in Medusa. You can set an image for the gift card, manage how much the gift card is worth and add different worths for a gift card, and more.
Multiple Currencies
In Medusa, you can choose multiple currencies for your store and set a default one.
Multiple Regions
Medusa allows you to add multiple regions, each having its own countries that are part of the region, payment method, shipping method, currency, and more.
Medusa's Strong Points
Blazingly Fast
As the frontend is decoupled from the backend, it removes the extra workload that is usually done in tightly coupled systems.
In addition, static site generators like Gatsby can be used to generate the storefront which would only need to connect to the backend through the REST APIs.
Highly Customizable
The decoupling of the frontend from the backend allows you to customize your storefront freely. You can pick whatever programming language or framework you wish to use for the front end.
That's one of the benefits of headless commerce. You are free to focus on the front end and get creative with it without the shackles of the backend.
Easy Development
One of the cons of a lot of popular e-commerce platforms is that they get too complicated or hard to learn. So, although they provide a lot of features that are enough to launch a store as is if you need to do any custom development you might need a lot of time to learn or understand its architecture.
Medusa is easy to use. In addition to the REST APIs available by default, you can easily add your own APIs. You can also create plugins to add missing functionalities or integrations that you need for your store.
Easy Setup and Deployment
You can set up a medusa store locally in a matter of minutes. With just 3 commands at most, you can have the backend, frontend, and admin dashboard all installed and ready to use.
At the moment of writing this, Medusa does not support multiple languages. Internationalization is a very important aspect of e-commerce.
So, if your store needs to support languages other than the English language, then Medusa is not a good option.
Medusa's roadmap shows that Localization is a planned task. So, in the future, it should be available.
Lack of Community Plugins
As Medusa is relatively new, at the moment there aren't many plugins created by the community to add custom functionalities to a Medusa store.
This is especially essential when it comes to payment and shipment integrations. Medusa comes with support for Stripe by default. Any additional payment or shipment services integration needs to be developed by you.
Simple Storefront
Although we all love simplicity, the storefronts that Medusa currently provides are too simple. For example, although you can add multiple regions or currencies in the admin panel, there's no way to actually switch between them when using the storefronts Medusa provides.
This won't be a problem if you're mostly relying on Medusa's headless commerce backend, or you're looking to customize your frontend as necessary for you. However, if you need to use the frontend as is with additional development, then you need to consider this first.
When Should You Use Medusa
Medusa is the perfect option if you are looking for headless commerce. With its easy setup, you can have a headless commerce backend ready in a few minutes.
Medusa is also perfect if you're looking for complete freedom when designing your storefront. Even if you use one of its storefronts, you can easily make changes to the design as you find fitting.
Medusa is also one of the very few options available to build e-commerce stores with modern technologies.
Conclusion
Medusa is still an evolving e-commerce platform. Yet, it still offers promising results compared to a lot of other e-commerce platforms when it comes to performance, customization, and other pros we've discussed throughout the article.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"E-commerce platforms and frameworks are usually built on a complex architecture to provide you with the best features as a developer and as a business owner. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although this is good as they pack all useful features in one framework in the hopes no additional work needs to be done to launch a store, this can result in some issues. The store can be slow which would require a set of external tools to make it faster and in some cases big hosting plans to ensure the customers get the best experience."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition to that, customizing an e-commerce store to fit your or your client's needs using some platforms can be hard due to their tightly bound or complicated architecture."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is where "},{"type":"element","tagName":"a","properties":{"href":"https://www.medusajs.com/"},"children":[{"type":"text","value":"Medusa"}]},{"type":"text","value":" comes in. Medusa is an open-source headless commerce platform that aims to simplify how e-commerce platforms are built and provide you with the highest level of customization you can attain to build the e-commerce store you have in mind."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, we'll briefly take a look at Medusa's structure and what it provides, then we'll see what are some of its strong points and what are some of its cons that you should keep in mind before choosing Medusa."}]},{"type":"element","tagName":"h2","properties":{"id":"medusas-architecture"},"children":[{"type":"text","value":"Medusa's Architecture "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa as a full e-commerce system is split into 3 parts or 3 building blocks."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The core of Medusa is its "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/medusajs/medusa/"},"children":[{"type":"text","value":"backend"}]},{"type":"text","value":". The backend exposes a REST API and connects directly to the database. The backend acts as the headless commerce, accessing and managing the store's data. The backend is built with Node.js and express. By default and for development purposes it provides support for SQLite for the database, however, it also provides support for PostgreSQL and Redis."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next comes the storefront. Medusa provides 2 storefronts that you can use, one built with "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/medusajs/nextjs-starter-medusa"},"children":[{"type":"text","value":"Next.js"}]},{"type":"text","value":" and another with "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/medusajs/gatsby-starter-medusa"},"children":[{"type":"text","value":"Gatsby.js"}]},{"type":"text","value":". The storefront connects to the backend and provides a slick design and a fast experience for your users."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last building block is the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/medusajs/admin"},"children":[{"type":"text","value":"admin dashboard"}]},{"type":"text","value":". The admin dashboard connects to the backend and allows you to easily manage products, orders, customers, and settings."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The only building block required to use Medusa is the backend. With the backend, you are able to customize your storefront as you see fit. Although Medusa provides a storefront that you can use, you are not obligated to use it and can create your own. The same goes for the admin dashboard."}]},{"type":"element","tagName":"h2","properties":{"id":"e-commerce-features"},"children":[{"type":"text","value":"E-Commerce Features"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this section, we'll cover some of the e-commerce features that Medusa provides. These are the features that you should expect when you create a store with Medusa."}]},{"type":"element","tagName":"h3","properties":{"id":"product-variants"},"children":[{"type":"text","value":"Product Variants"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Medusa, you can easily add product variants like Size. You can also add multiple prices for different currencies, manage the inventory of each variant, and more."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.55.08-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":743,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-10-at-12.55.08-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-10-at-12.55.08-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-10-at-12.55.08-AM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.55.08-AM.png 2078w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"discounts"},"children":[{"type":"text","value":"Discounts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can add discounts or offer free shipping based on region. You can apply the discount as a percentage or as a fixed amount."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.56.30-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1446,"height":1568,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-10-at-12.56.30-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-10-at-12.56.30-AM.png 1000w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.56.30-AM.png 1446w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"gift-cards"},"children":[{"type":"text","value":"Gift Cards"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Gift cards come built-in in Medusa. You can set an image for the gift card, manage how much the gift card is worth and add different worths for a gift card, and more."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.57.52-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1478,"height":1530,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-10-at-12.57.52-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-10-at-12.57.52-AM.png 1000w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.57.52-AM.png 1478w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"multiple-currencies"},"children":[{"type":"text","value":"Multiple Currencies"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Medusa, you can choose multiple currencies for your store and set a default one."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-1.00.21-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":802,"height":650,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-10-at-1.00.21-AM.png 600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-1.00.21-AM.png 802w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"multiple-regions"},"children":[{"type":"text","value":"Multiple Regions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa allows you to add multiple regions, each having its own countries that are part of the region, payment method, shipping method, currency, and more."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-1.00.43-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":459,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-10-at-1.00.43-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-10-at-1.00.43-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-10-at-1.00.43-AM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-1.00.43-AM.png 2146w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"medusas-strong-points"},"children":[{"type":"text","value":"Medusa's Strong Points"}]},{"type":"element","tagName":"h3","properties":{"id":"blazingly-fast"},"children":[{"type":"text","value":"Blazingly Fast"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As the frontend is decoupled from the backend, it removes the extra workload that is usually done in tightly coupled systems."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition, static site generators like Gatsby can be used to generate the storefront which would only need to connect to the backend through the REST APIs."}]},{"type":"element","tagName":"h3","properties":{"id":"highly-customizable"},"children":[{"type":"text","value":"Highly Customizable"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The decoupling of the frontend from the backend allows you to customize your storefront freely. You can pick whatever programming language or framework you wish to use for the front end."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That's one of the benefits of headless commerce. You are free to focus on the front end and get creative with it without the shackles of the backend."}]},{"type":"element","tagName":"h3","properties":{"id":"easy-development"},"children":[{"type":"text","value":"Easy Development"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One of the cons of a lot of popular e-commerce platforms is that they get too complicated or hard to learn. So, although they provide a lot of features that are enough to launch a store as is if you need to do any custom development you might need a lot of time to learn or understand its architecture."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa is easy to use. In addition to the REST APIs available by default, you can easily add your own APIs. You can also create plugins to add missing functionalities or integrations that you need for your store."}]},{"type":"element","tagName":"h3","properties":{"id":"easy-setup-and-deployment"},"children":[{"type":"text","value":"Easy Setup and Deployment"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can set up a medusa store locally in a matter of minutes. With just 3 commands at most, you can have the backend, frontend, and admin dashboard all installed and ready to use."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Similarly, its deployment is easy as well. Medusa's documentation already has a guide on how to "},{"type":"element","tagName":"a","properties":{"href":"https://docs.medusa-commerce.com/how-to/deploying-on-heroku"},"children":[{"type":"text","value":"deploy the backend on Heruko"}]},{"type":"text","value":", and the "},{"type":"element","tagName":"a","properties":{"href":"https://docs.medusa-commerce.com/how-to/deploying-admin-on-netlify"},"children":[{"type":"text","value":"admin dashboard on Netlify"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"medusas-cons"},"children":[{"type":"text","value":"Medusa's Cons"}]},{"type":"element","tagName":"h3","properties":{"id":"no-internationalization"},"children":[{"type":"text","value":"No Internationalization"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At the moment of writing this, Medusa does not support multiple languages. Internationalization is a very important aspect of e-commerce."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, if your store needs to support languages other than the English language, then Medusa is not a good option."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa's "},{"type":"element","tagName":"a","properties":{"href":"https://roadmap.medusa-commerce.com/c/8-localizations-api"},"children":[{"type":"text","value":"roadmap"}]},{"type":"text","value":" shows that Localization is a planned task. So, in the future, it should be available."}]},{"type":"element","tagName":"h3","properties":{"id":"lack-of-community-plugins"},"children":[{"type":"text","value":"Lack of Community Plugins"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As Medusa is relatively new, at the moment there aren't many plugins created by the community to add custom functionalities to a Medusa store."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is especially essential when it comes to payment and shipment integrations. Medusa comes with support for Stripe by default. Any additional payment or shipment services integration needs to be developed by you."}]},{"type":"element","tagName":"h3","properties":{"id":"simple-storefront"},"children":[{"type":"text","value":"Simple Storefront"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although we all love simplicity, the storefronts that Medusa currently provides are too simple. For example, although you can add multiple regions or currencies in the admin panel, there's no way to actually switch between them when using the storefronts Medusa provides."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This won't be a problem if you're mostly relying on Medusa's headless commerce backend, or you're looking to customize your frontend as necessary for you. However, if you need to use the frontend as is with additional development, then you need to consider this first."}]},{"type":"element","tagName":"h2","properties":{"id":"when-should-you-use-medusa"},"children":[{"type":"text","value":"When Should You Use Medusa"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa is the perfect option if you are looking for headless commerce. With its easy setup, you can have a headless commerce backend ready in a few minutes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa is also perfect if you're looking for complete freedom when designing your storefront. Even if you use one of its storefronts, you can easily make changes to the design as you find fitting."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa is also one of the very few options available to build e-commerce stores with modern technologies."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medusa is still an evolving e-commerce platform. Yet, it still offers promising results compared to a lot of other e-commerce platforms when it comes to performance, customization, and other pros we've discussed throughout the article."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can get started with Medusa in minutes with their "},{"type":"element","tagName":"a","properties":{"href":"https://docs.medusa-commerce.com/quickstart/quick-start"},"children":[{"type":"text","value":"Quickstart documentation."}]}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"medusas-architecture","heading":"Medusa's Architecture "},{"id":"e-commerce-features","heading":"E-Commerce Features","items":[{"id":"product-variants","heading":"Product Variants"},{"id":"discounts","heading":"Discounts"},{"id":"gift-cards","heading":"Gift Cards"},{"id":"multiple-currencies","heading":"Multiple Currencies"},{"id":"multiple-regions","heading":"Multiple Regions"}]},{"id":"medusas-strong-points","heading":"Medusa's Strong Points","items":[{"id":"blazingly-fast","heading":"Blazingly Fast"},{"id":"highly-customizable","heading":"Highly Customizable"},{"id":"easy-development","heading":"Easy Development"},{"id":"easy-setup-and-deployment","heading":"Easy Setup and Deployment"}]},{"id":"medusas-cons","heading":"Medusa's Cons","items":[{"id":"no-internationalization","heading":"No Internationalization"},{"id":"lack-of-community-plugins","heading":"Lack of Community Plugins"},{"id":"simple-storefront","heading":"Simple Storefront"}]},{"id":"when-should-you-use-medusa","heading":"When Should You Use Medusa"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"Fast-and-Highly-Customizable-E-commerce-Stores.png","publicURL":"/static/b8bc41e18ef83364e45ba3fb6a77ad91/Fast-and-Highly-Customizable-E-commerce-Stores.png","imageMeta":{"width":1080,"height":1080},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB0klEQVQ4y+WUzWsTQRTA94/1LhQP4qF48SAUhCDSg/gBovZgtYrgVyNCLMVqtVHSbNJN0k1i0LbJ7maT7NfsT2biLts0CQa9+djHezsz+5s3895bjX8s2n8IjOMYqVKkFRPvib8QUIrIfhjLJ0YIkWoCz/pZTQLQsjAn9tkRHcSYeEbmRZuAtQRmxjYXw3cshXmuhFsIQDdM9EaTz6VqCjs4bOMHgfKj39FnN9OieDywFu2Tiz4q/7z3GpMh9x+94tzyCpev3+XStZvk7q2zdPUGt9dfsPrwKSu31tRcfns33SCNcE/8UNHlok9cCPI4BBiNNhv593wo7vNks8DLwg7P3m4pffymoOyD55t8rdTGeZDA7B2WxTF3oiI/4wGIxcolPXI2S57r0ay0aZgdqoctDLPNbqlKUa9Rb3WoNFro9abSvfIB219K2H33dFKywFAIvDDgqGdhmN8VQB6nqBsp6Fu1TrlmMvJ8PN9X93YKOK0kgiCk5/Tp2g6OO+DEcpRvOS7HPZuu5cwsJy07sEhnTCvqM708CU67Y0pnTILm/hz+JMpZa7RZC6V1hyOsvqvuTmazPxgyHHkzo5sLlCIhR12LE8tWViZGbrIQ8G+P/AsD7A56k5u11wAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/b8bc41e18ef83364e45ba3fb6a77ad91/60290/Fast-and-Highly-Customizable-E-commerce-Stores.png","srcSet":"/static/b8bc41e18ef83364e45ba3fb6a77ad91/847ef/Fast-and-Highly-Customizable-E-commerce-Stores.png 175w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/91cba/Fast-and-Highly-Customizable-E-commerce-Stores.png 350w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/60290/Fast-and-Highly-Customizable-E-commerce-Stores.png 700w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/f5f50/Fast-and-Highly-Customizable-E-commerce-Stores.png 1050w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/14010/Fast-and-Highly-Customizable-E-commerce-Stores.png 1080w","srcWebp":"/static/b8bc41e18ef83364e45ba3fb6a77ad91/89afa/Fast-and-Highly-Customizable-E-commerce-Stores.webp","srcSetWebp":"/static/b8bc41e18ef83364e45ba3fb6a77ad91/9fca7/Fast-and-Highly-Customizable-E-commerce-Stores.webp 175w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/37a4e/Fast-and-Highly-Customizable-E-commerce-Stores.webp 350w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/89afa/Fast-and-Highly-Customizable-E-commerce-Stores.webp 700w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/78e7a/Fast-and-Highly-Customizable-E-commerce-Stores.webp 1050w,\n/static/b8bc41e18ef83364e45ba3fb6a77ad91/788b4/Fast-and-Highly-Customizable-E-commerce-Stores.webp 1080w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__615c29963eea8f060129b225","title":"Top 9 Software Ideas for Start-Ups for The Year 2022","slug":"top-9-software-ideas-for-start-ups-for-the-year-2022","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/10/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg","excerpt":"Given the rapid advancement of new technologies in recent years, the software development sector is one that should be pursued.","custom_excerpt":"Given the rapid advancement of new technologies in recent years, the software development sector is one that should be pursued.","visibility":"public","created_at_pretty":"5 Oct 2021","published_at_pretty":"5 Oct 2021","updated_at_pretty":"5 Oct 2021","created_at":"2021-10-05T10:31:50.000+00:00","published_at":"2021-10-05T11:24:22.000+00:00","updated_at":"2021-10-05T11:49:41.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"akash","url":"https://backend.shahednasser.com/author/akash/","name":"Akash Tripathi","bio":"Digital Marketer at Top Mobile Tech. I cover all the tips & tricks related to Mobile and tech. We bring the latest and critical news to your mobile and computer devices.","cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2021/10/unnamed-1.png","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"akash","url":"https://backend.shahednasser.com/author/akash/","name":"Akash Tripathi","bio":"Digital Marketer at Top Mobile Tech. I cover all the tips & tricks related to Mobile and tech. We bring the latest and critical news to your mobile and computer devices.","cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2021/10/unnamed-1.png","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"unnamed-1.png","publicURL":"/static/69bf109cd910b102ed4beb9e554a4581/unnamed-1.png","imageMeta":{"width":200,"height":200},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEV0lEQVQ4y22Se0xTZxjG3+/7zqU9p6e3QwvUtrRKFVCL1BYvdCqCongD8QJDwwbiLOIFcG4G3AI6/UPFBUxAIKK7KIvgNhaUZQO2qfHyB8G5sYgOVIR5ISjMFUHwLOAWk7nn3/f95X2eJy8AAEFIjhD8K4KQQDMCw4o8b9NrFAwN8Gr6X2FAKoLxPxtIRtEiJ+dZViWXW7Rqg0oFiKD/5VUySsfR/jJawxBBxrAURWGMEcYYCzLOaRSdBl5FCAaE0Gu8TZTbDYKWoRQYOU06l8WXYIIR0dD0NLXyq6zInoq4usxQoyADeI22iVyYUWU3imaN4DL5zpxgAEAuf74yMbjaEz1cl9tfs/FReeSGMPVoHfgVP2okWCeEW7SOAN0Uf63TKMaGGGig0u2an/e5m0vTr5Vk/lG1+dLe+WlOPQI0GuflfYQIwhBmFF0WX44mShnjMCjbDqV8tNxxZIW5Omnqvjj3yRRH4+5FhUtD06dZfRQ8gxEzFh2/hN+YaHAHGVmCJ+g1oeOUt0tSftwVc257cEdF8uWCNb8dWtVevLZxm7MkaSrLMALGHMJkjCSAYN7kcXNCTAqKhAcax4uqwnXhzQXLT60z9Z/JkZrKek/l3C1P666Iqy9YCgAsxixC9Jh5XsbCArvFHWRUyxh3iNXio0pfsbBqpfVIFNdyeNHtyqyWw5u+z1ny3ZbpGTEhACAQIkeIRQgDTDD7wbIZge5gs59SPisowCZyVSc/aTlXfXCxrX5H0PXi1efzVjVkxJzeFB7op8YASoI4hFkAOSEWgwipK1wRwQE6nrFb9LF288G0hFv3n7Q2X/s8J75m+/QbZZ6u8tQdy4IAQE0TAWMFwTwhAJC4chF41swOt43jERTlZ175tvLdxa6qo2WPB6S23x/WHi2qyn4zLymKo0BBaB+a1tCUiiYCTQHArux3IH/n8okG0eyrvXn1zLPuqzevfl28J7u2tq69s6/74Yua41VzZs7y0WgBQIaRhqHUNMVTo3Bp4YeQm7MkPNi8572Nf3Zd9vZce/64te/WxV8vfNlxo7WtrfvYgQ/SEhZuzfLk5WaFBFoBgCMUizEAFO7PgyxPQtz8Gb9crJGedYwM3hse7Bz23n72qLWr7UJTffXa5AQTx20M8E+MiUxJXT/JYmZomqFpUa1W8krYkTwvNsjw6YmPJal3yNs54u0cenpHknpyczYbKSaKIoU6+VmDMp+FueONPzVU19eUJscvMBn8R//7eLwrWQ7pGamS9GTY2zkycG+wr12Send7NuxlocGiabQoyvxVTXqhziw6NMKB/bvOf3Mif6cn0GqG3IjJRWYm1D7lr/526fn9FwNdI0/vPO3rWOeeXePHXHFq9+r5RJNYpFfXKxXlakWqThUdGTH0oPn6D6ehcMvqeofaysnOnvtCkvqGvZ1DfR3SyIP3316fyJP0Sfpoh23b1lUxgcYKjj0mKj8TBStAVuZb3ruX/gYqhFKKHuhYzwAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/69bf109cd910b102ed4beb9e554a4581/6ccb0/unnamed-1.png","srcSet":"/static/69bf109cd910b102ed4beb9e554a4581/7d89d/unnamed-1.png 28w,\n/static/69bf109cd910b102ed4beb9e554a4581/f4091/unnamed-1.png 55w,\n/static/69bf109cd910b102ed4beb9e554a4581/6ccb0/unnamed-1.png 110w,\n/static/69bf109cd910b102ed4beb9e554a4581/30481/unnamed-1.png 165w,\n/static/69bf109cd910b102ed4beb9e554a4581/8ac63/unnamed-1.png 200w","srcWebp":"/static/69bf109cd910b102ed4beb9e554a4581/8678c/unnamed-1.webp","srcSetWebp":"/static/69bf109cd910b102ed4beb9e554a4581/59cda/unnamed-1.webp 28w,\n/static/69bf109cd910b102ed4beb9e554a4581/7da75/unnamed-1.webp 55w,\n/static/69bf109cd910b102ed4beb9e554a4581/8678c/unnamed-1.webp 110w,\n/static/69bf109cd910b102ed4beb9e554a4581/f282e/unnamed-1.webp 165w,\n/static/69bf109cd910b102ed4beb9e554a4581/6b183/unnamed-1.webp 200w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},"tags":[{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},{"slug":"business","url":"https://backend.shahednasser.com/tag/business/","name":"Business","visibility":"public","feature_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/floriane-vita-FyD3OWBuXnY-unsplash-2.jpg","description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Since the outbreak of the pandemic in March 2020, the use of new software\ntechnologies has grown at an amazing rate, increasing the need for custom\nsoftware solution providers. These on-demand software development companies\n[https://www.esparkinfo.com/custom-software-development.html] have raised more\nthan 200 percent of the developing cloud index's total capital and have a market\nvalue of around $2.4 trillion.\n\nGiven the rapid advancement of new technologies in recent years, the software\ndevelopment sector is one that should be pursued. As a result, these are the top\n9 software ideas for start-ups in 2022.\n\nManagement of Rental Properties\nOwnership of more than five homes or working as a real estate agent may make\nproperty management difficult. The goal is to develop an application that can\nassist an owner, a property agent, a renter, and a property joint management\norganization with the following:\n\n * Rental collecting, reminders for payments, and receipts for payments.\n * For smooth payment collection, integrate online payment and e-wallet.\n * Upkeep and repair.\n * Management of complaints and feedback.\n * Management by commission.\n\nInvestor Journal\nInvestors are advised to keep track of their buy and sell orders so they may\nlook back and reflect on the lessons they've learned.\n\nUsing the collected expertise stored in this program, investors may revise and\nexamine previous investments in order to enhance their performance.\n\nChatbot Solution Powered by Virtual AI\nSince 2014, the number of people who shop digitally has increased dramatically.\n\nIn 2021, there will be 2.14 billion digital purchasers out of a total population\nof 7.78 billion, a 4.4 percent growth year over year.\n\nEventually, every firm will have to go online. A chatbot and virtual assistant\nwill dramatically enhance the customer experience, conversion, and selling. It\nwould be ideal if it could link to the most popular social media platforms such\nas Instagram, Facebook, Telegram, WhatsApp, and WeChat to enable seamless\nautomation.\n\nCollaborative Tool for Teams and Platform for Team Development\nWorking from home has become the new normal for employees worldwide. Companies\nrequire tools for team collaboration in order to maintain team cohesion, smooth\ntask delegation, project management, and documentation.\n\nThe global market for team collaboration software is estimated at $27.8 billion\nby 2028 as per Global Newswire\n[https://www.globenewswire.com/news-release/2021/07/27/2269668/0/en/Team-Collaboration-Software-Market-Value-Predicted-To-Reach-US-27-8-Billion-By-2028-Covering-COVID-19-ERA-Acumen-Research-and-Consulting.html]\n.\n\nAdditionally, 24% of respondents reported experiencing video meeting fatigue,\n19% report having difficulty interacting in real-time (preferring not to connect\nthrough email or messenger), and 17% report finding it more difficult to manage\nprofessional relationships. – Survey conducted by Flexjobs\n[https://www.flexjobs.com/blog/post/flexjobs-survey-finds-employees-want-remote-work-post-pandemic/]\n.\n\nA platform for team development would greatly enhance communication and\nrelationships among team members. To keep users socially engaged, the platform\ncan incorporate aspects of different gaming activities (such as the game\ndepicted above), team interaction capabilities, beautiful visuals, and music.\n\nDespite the fact that there are many collaborations and team-building\ntechnologies available on the market, demand for them continues to grow at an\nexponential rate.\n\nDevelop a Medical Software Program\nMedical Software manages patients' computerized medical records. Numerous\nclinics and hospitals seek an alternative to error-prone manual patient data\ninput. In this way, you may educate clinics and hospitals about the advantages\nof the medical software you're developing and sell them on it.\n\nBy Statista, medical software is predicted to reach $4.26 billion\n[https://www.statista.com/statistics/866501/medical-imaging-analytics-software-market-size-worldwide/] \nin global sales by 2025. As can be seen, there are several changes in this\nfield. There are many healthcare software development businesses\n[https://www.topmobiletech.com/top-software-development-companies/] that may\nassist you in developing medical software and bringing your idea to life.\n\n[https://yiro6gzu369.typeform.com/to/bmKKNVlh]Itinerary Maker for Trips\nAlthough the tourist business appears to be suffering at the moment, this sector\nis poised for rapid expansion after the epidemic is over.\n\nIt may be hard to plan a trip schedule. We'll need distance, location,\nsuggestions, and budget information to decide which POIs (points of interest)\nfit within the schedule.\n\nWhen using a trip itinerary planner, all of the relevant information is gathered\nin one location, and destinations can be effortlessly dragged and dropped. It is\npreferable if the planner can automatically optimize the schedule for distance\nand cost of travel. Additionally, posting tailored vacation itineraries will\nsignificantly boost the platform's network impact.\n\nSolutions for Email Delivery\nModern life is dominated by online activities such as shopping, ordering takeout\nor delivery, communicating, participating in sports, banking, and attending\nmeetings or conventions. When it comes to transactional services like\nregistration of an account, reset the password, confirmation, financial\ntransactions, and marketing, email delivery plays a critical role.\n\nNumerous enhancements are possible, including user interface, ease of setup,\ncustomer experience, and cost.\n\nPassword Organiser\nThere are 80 applications on average for every smartphone user\n[https://www.socialmediatoday.com/news/60-fascinating-smartphone-apps-usage-statistics-for-2019-infographic/550990/]\n. In other words, users will have to keep track of at least 80 distinct sets of\nlogin credentials. Password reuse is a security risk because even if one app\ndatabase is compromised, it might compromise other accounts that use the same\npassword.\n\nPassword manager solves this problem by assisting you in creating and\nremembering a unique password for each account. Then, secure the master account\nusing several levels of security, such as two-factor verification or Google\nAuthentication protocol.\n\nPlatform for Online Training and Coaching\nSince the epidemic, many individuals worldwide have begun teaching online and\nproviding coaching services. It's reasonable to manage all members on a personal\nFacebook page, but branding, professionalism, and a payment mechanism are all\nmissing in action.\n\nThe purpose of this platform is to enable coaches to post multimedia recordings,\nlectures, and tutoring sessions. Exams, quizzes, and completion certificates can\nall be used to engage pupils. Automated membership money collection from\nsubscribers, allowing the coach to focus on providing outstanding material\ninstead.\n\nConclusion\nWhile software products may expand at an insane rate due to their extensibility\nas software, the work and expense associated with developing effective software\ncan be rather high. Create a minimum viable product (MVP) first, and then get\nsome early consumers on board to offer you valuable feedback.","html":"
Since the outbreak of the pandemic in March 2020, the use of new software technologies has grown at an amazing rate, increasing the need for custom software solution providers. These on-demand software development companies have raised more than 200 percent of the developing cloud index's total capital and have a market value of around $2.4 trillion.
Given the rapid advancement of new technologies in recent years, the software development sector is one that should be pursued. As a result, these are the top 9 software ideas for start-ups in 2022.
Management of Rental Properties
Ownership of more than five homes or working as a real estate agent may make property management difficult. The goal is to develop an application that can assist an owner, a property agent, a renter, and a property joint management organization with the following:
Rental collecting, reminders for payments, and receipts for payments.
For smooth payment collection, integrate online payment and e-wallet.
Upkeep and repair.
Management of complaints and feedback.
Management by commission.
Investor Journal
Investors are advised to keep track of their buy and sell orders so they may look back and reflect on the lessons they've learned.
Using the collected expertise stored in this program, investors may revise and examine previous investments in order to enhance their performance.
Chatbot Solution Powered by Virtual AI
Since 2014, the number of people who shop digitally has increased dramatically.
In 2021, there will be 2.14 billion digital purchasers out of a total population of 7.78 billion, a 4.4 percent growth year over year.
Eventually, every firm will have to go online. A chatbot and virtual assistant will dramatically enhance the customer experience, conversion, and selling. It would be ideal if it could link to the most popular social media platforms such as Instagram, Facebook, Telegram, WhatsApp, and WeChat to enable seamless automation.
Collaborative Tool for Teams and Platform for Team Development
Working from home has become the new normal for employees worldwide. Companies require tools for team collaboration in order to maintain team cohesion, smooth task delegation, project management, and documentation.
The global market for team collaboration software is estimated at $27.8 billion by 2028 as per Global Newswire.
Additionally, 24% of respondents reported experiencing video meeting fatigue, 19% report having difficulty interacting in real-time (preferring not to connect through email or messenger), and 17% report finding it more difficult to manage professional relationships. – Survey conducted by Flexjobs.
A platform for team development would greatly enhance communication and relationships among team members. To keep users socially engaged, the platform can incorporate aspects of different gaming activities (such as the game depicted above), team interaction capabilities, beautiful visuals, and music.
Despite the fact that there are many collaborations and team-building technologies available on the market, demand for them continues to grow at an exponential rate.
Develop a Medical Software Program
Medical Software manages patients' computerized medical records. Numerous clinics and hospitals seek an alternative to error-prone manual patient data input. In this way, you may educate clinics and hospitals about the advantages of the medical software you're developing and sell them on it.
Although the tourist business appears to be suffering at the moment, this sector is poised for rapid expansion after the epidemic is over.
It may be hard to plan a trip schedule. We'll need distance, location, suggestions, and budget information to decide which POIs (points of interest) fit within the schedule.
When using a trip itinerary planner, all of the relevant information is gathered in one location, and destinations can be effortlessly dragged and dropped. It is preferable if the planner can automatically optimize the schedule for distance and cost of travel. Additionally, posting tailored vacation itineraries will significantly boost the platform's network impact.
Solutions for Email Delivery
Modern life is dominated by online activities such as shopping, ordering takeout or delivery, communicating, participating in sports, banking, and attending meetings or conventions. When it comes to transactional services like registration of an account, reset the password, confirmation, financial transactions, and marketing, email delivery plays a critical role.
Numerous enhancements are possible, including user interface, ease of setup, customer experience, and cost.
Password Organiser
There are 80 applications on average for every smartphone user. In other words, users will have to keep track of at least 80 distinct sets of login credentials. Password reuse is a security risk because even if one app database is compromised, it might compromise other accounts that use the same password.
Password manager solves this problem by assisting you in creating and remembering a unique password for each account. Then, secure the master account using several levels of security, such as two-factor verification or Google Authentication protocol.
Platform for Online Training and Coaching
Since the epidemic, many individuals worldwide have begun teaching online and providing coaching services. It's reasonable to manage all members on a personal Facebook page, but branding, professionalism, and a payment mechanism are all missing in action.
The purpose of this platform is to enable coaches to post multimedia recordings, lectures, and tutoring sessions. Exams, quizzes, and completion certificates can all be used to engage pupils. Automated membership money collection from subscribers, allowing the coach to focus on providing outstanding material instead.
Conclusion
While software products may expand at an insane rate due to their extensibility as software, the work and expense associated with developing effective software can be rather high. Create a minimum viable product (MVP) first, and then get some early consumers on board to offer you valuable feedback.
Since the outbreak of the pandemic in March 2020, the use of new software technologies has grown at an amazing rate, increasing the need for custom software solution providers. These on-demand software development companies have raised more than 200 percent of the developing cloud index's total capital and have a market value of around $2.4 trillion.
Given the rapid advancement of new technologies in recent years, the software development sector is one that should be pursued. As a result, these are the top 9 software ideas for start-ups in 2022.
Management of Rental Properties
Ownership of more than five homes or working as a real estate agent may make property management difficult. The goal is to develop an application that can assist an owner, a property agent, a renter, and a property joint management organization with the following:
Rental collecting, reminders for payments, and receipts for payments.
For smooth payment collection, integrate online payment and e-wallet.
Upkeep and repair.
Management of complaints and feedback.
Management by commission.
Investor Journal
Investors are advised to keep track of their buy and sell orders so they may look back and reflect on the lessons they've learned.
Using the collected expertise stored in this program, investors may revise and examine previous investments in order to enhance their performance.
Chatbot Solution Powered by Virtual AI
Since 2014, the number of people who shop digitally has increased dramatically.
In 2021, there will be 2.14 billion digital purchasers out of a total population of 7.78 billion, a 4.4 percent growth year over year.
Eventually, every firm will have to go online. A chatbot and virtual assistant will dramatically enhance the customer experience, conversion, and selling. It would be ideal if it could link to the most popular social media platforms such as Instagram, Facebook, Telegram, WhatsApp, and WeChat to enable seamless automation.
Collaborative Tool for Teams and Platform for Team Development
Working from home has become the new normal for employees worldwide. Companies require tools for team collaboration in order to maintain team cohesion, smooth task delegation, project management, and documentation.
The global market for team collaboration software is estimated at $27.8 billion by 2028 as per Global Newswire.
Additionally, 24% of respondents reported experiencing video meeting fatigue, 19% report having difficulty interacting in real-time (preferring not to connect through email or messenger), and 17% report finding it more difficult to manage professional relationships. – Survey conducted by Flexjobs.
A platform for team development would greatly enhance communication and relationships among team members. To keep users socially engaged, the platform can incorporate aspects of different gaming activities (such as the game depicted above), team interaction capabilities, beautiful visuals, and music.
Despite the fact that there are many collaborations and team-building technologies available on the market, demand for them continues to grow at an exponential rate.
Develop a Medical Software Program
Medical Software manages patients' computerized medical records. Numerous clinics and hospitals seek an alternative to error-prone manual patient data input. In this way, you may educate clinics and hospitals about the advantages of the medical software you're developing and sell them on it.
Although the tourist business appears to be suffering at the moment, this sector is poised for rapid expansion after the epidemic is over.
It may be hard to plan a trip schedule. We'll need distance, location, suggestions, and budget information to decide which POIs (points of interest) fit within the schedule.
When using a trip itinerary planner, all of the relevant information is gathered in one location, and destinations can be effortlessly dragged and dropped. It is preferable if the planner can automatically optimize the schedule for distance and cost of travel. Additionally, posting tailored vacation itineraries will significantly boost the platform's network impact.
Solutions for Email Delivery
Modern life is dominated by online activities such as shopping, ordering takeout or delivery, communicating, participating in sports, banking, and attending meetings or conventions. When it comes to transactional services like registration of an account, reset the password, confirmation, financial transactions, and marketing, email delivery plays a critical role.
Numerous enhancements are possible, including user interface, ease of setup, customer experience, and cost.
Password Organiser
There are 80 applications on average for every smartphone user. In other words, users will have to keep track of at least 80 distinct sets of login credentials. Password reuse is a security risk because even if one app database is compromised, it might compromise other accounts that use the same password.
Password manager solves this problem by assisting you in creating and remembering a unique password for each account. Then, secure the master account using several levels of security, such as two-factor verification or Google Authentication protocol.
Platform for Online Training and Coaching
Since the epidemic, many individuals worldwide have begun teaching online and providing coaching services. It's reasonable to manage all members on a personal Facebook page, but branding, professionalism, and a payment mechanism are all missing in action.
The purpose of this platform is to enable coaches to post multimedia recordings, lectures, and tutoring sessions. Exams, quizzes, and completion certificates can all be used to engage pupils. Automated membership money collection from subscribers, allowing the coach to focus on providing outstanding material instead.
Conclusion
While software products may expand at an insane rate due to their extensibility as software, the work and expense associated with developing effective software can be rather high. Create a minimum viable product (MVP) first, and then get some early consumers on board to offer you valuable feedback.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since the outbreak of the pandemic in March 2020, the use of new software technologies has grown at an amazing rate, increasing the need for custom software solution providers. These "},{"type":"element","tagName":"a","properties":{"href":"https://www.esparkinfo.com/custom-software-development.html"},"children":[{"type":"text","value":"on-demand software development companies"}]},{"type":"text","value":" have raised more than 200 percent of the developing cloud index's total capital and have a market value of around $2.4 trillion."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Given the rapid advancement of new technologies in recent years, the software development sector is one that should be pursued. As a result, these are the top 9 software ideas for start-ups in 2022."}]},{"type":"element","tagName":"h2","properties":{"id":"management-of-rental-properties"},"children":[{"type":"text","value":"Management of Rental Properties"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ownership of more than five homes or working as a real estate agent may make property management difficult. The goal is to develop an application that can assist an owner, a property agent, a renter, and a property joint management organization with the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rental collecting, reminders for payments, and receipts for payments."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"For smooth payment collection, integrate online payment and e-wallet."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Upkeep and repair."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Management of complaints and feedback."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Management by commission."}]}]},{"type":"element","tagName":"h2","properties":{"id":"investor-journal"},"children":[{"type":"text","value":"Investor Journal"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Investors are advised to keep track of their buy and sell orders so they may look back and reflect on the lessons they've learned."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using the collected expertise stored in this program, investors may revise and examine previous investments in order to enhance their performance."}]},{"type":"element","tagName":"h2","properties":{"id":"chatbot-solution-powered-by-virtual-ai"},"children":[{"type":"text","value":"Chatbot Solution Powered by Virtual AI"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since 2014, the number of people who shop digitally has increased dramatically."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In 2021, there will be 2.14 billion digital purchasers out of a total population of 7.78 billion, a 4.4 percent growth year over year."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Eventually, every firm will have to go online. A chatbot and virtual assistant will dramatically enhance the customer experience, conversion, and selling. It would be ideal if it could link to the most popular social media platforms such as Instagram, Facebook, Telegram, WhatsApp, and WeChat to enable seamless automation."}]},{"type":"element","tagName":"h2","properties":{"id":"collaborative-tool-for-teams-and-platform-for-team-development"},"children":[{"type":"text","value":"Collaborative Tool for Teams and Platform for Team Development"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Working from home has become the new normal for employees worldwide. Companies require tools for team collaboration in order to maintain team cohesion, smooth task delegation, project management, and documentation."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The global market for team collaboration software is estimated at $27.8 billion by 2028 as per "},{"type":"element","tagName":"a","properties":{"href":"https://www.globenewswire.com/news-release/2021/07/27/2269668/0/en/Team-Collaboration-Software-Market-Value-Predicted-To-Reach-US-27-8-Billion-By-2028-Covering-COVID-19-ERA-Acumen-Research-and-Consulting.html"},"children":[{"type":"text","value":"Global Newswire"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Additionally, 24% of respondents reported experiencing video meeting fatigue, 19% report having difficulty interacting in real-time (preferring not to connect through email or messenger), and 17% report finding it more difficult to manage professional relationships. – "},{"type":"element","tagName":"a","properties":{"href":"https://www.flexjobs.com/blog/post/flexjobs-survey-finds-employees-want-remote-work-post-pandemic/"},"children":[{"type":"text","value":"Survey conducted by Flexjobs"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A platform for team development would greatly enhance communication and relationships among team members. To keep users socially engaged, the platform can incorporate aspects of different gaming activities (such as the game depicted above), team interaction capabilities, beautiful visuals, and music."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Despite the fact that there are many collaborations and team-building technologies available on the market, demand for them continues to grow at an exponential rate."}]},{"type":"element","tagName":"h2","properties":{"id":"develop-a-medical-software-program"},"children":[{"type":"text","value":"Develop a Medical Software Program"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Medical Software manages patients' computerized medical records. Numerous clinics and hospitals seek an alternative to error-prone manual patient data input. In this way, you may educate clinics and hospitals about the advantages of the medical software you're developing and sell them on it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By Statista, "},{"type":"element","tagName":"a","properties":{"href":"https://www.statista.com/statistics/866501/medical-imaging-analytics-software-market-size-worldwide/"},"children":[{"type":"text","value":"medical software is predicted to reach $4.26 billion"}]},{"type":"text","value":" in global sales by 2025. As can be seen, there are several changes in this field. There are many healthcare "},{"type":"element","tagName":"a","properties":{"href":"https://www.topmobiletech.com/top-software-development-companies/"},"children":[{"type":"text","value":"software development businesses"}]},{"type":"text","value":" that may assist you in developing medical software and bringing your idea to life."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"a","properties":{"href":"https://yiro6gzu369.typeform.com/to/bmKKNVlh"},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res.cloudinary.com/shahed/image/upload/v1633434557/Place_your_Ad_here_178_x_100_px_-3_kvf6uo.png","alt":"Place Your Ad Here"},"children":[]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h2","properties":{"id":"itinerary-maker-for-trips"},"children":[{"type":"text","value":"Itinerary Maker for Trips"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although the tourist business appears to be suffering at the moment, this sector is poised for rapid expansion after the epidemic is over."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It may be hard to plan a trip schedule. We'll need distance, location, suggestions, and budget information to decide which POIs (points of interest) fit within the schedule."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using a trip itinerary planner, all of the relevant information is gathered in one location, and destinations can be effortlessly dragged and dropped. It is preferable if the planner can automatically optimize the schedule for distance and cost of travel. Additionally, posting tailored vacation itineraries will significantly boost the platform's network impact."}]},{"type":"element","tagName":"h2","properties":{"id":"solutions-for-email-delivery"},"children":[{"type":"text","value":"Solutions for Email Delivery"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Modern life is dominated by online activities such as shopping, ordering takeout or delivery, communicating, participating in sports, banking, and attending meetings or conventions. When it comes to transactional services like registration of an account, reset the password, confirmation, financial transactions, and marketing, email delivery plays a critical role."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Numerous enhancements are possible, including user interface, ease of setup, customer experience, and cost."}]},{"type":"element","tagName":"h2","properties":{"id":"password-organiser"},"children":[{"type":"text","value":"Password Organiser"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are "},{"type":"element","tagName":"a","properties":{"href":"https://www.socialmediatoday.com/news/60-fascinating-smartphone-apps-usage-statistics-for-2019-infographic/550990/"},"children":[{"type":"text","value":"80 applications on average for every smartphone user"}]},{"type":"text","value":". In other words, users will have to keep track of at least 80 distinct sets of login credentials. Password reuse is a security risk because even if one app database is compromised, it might compromise other accounts that use the same password."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Password manager solves this problem by assisting you in creating and remembering a unique password for each account. Then, secure the master account using several levels of security, such as two-factor verification or Google Authentication protocol."}]},{"type":"element","tagName":"h2","properties":{"id":"platform-for-online-training-and-coaching"},"children":[{"type":"text","value":"Platform for Online Training and Coaching"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since the epidemic, many individuals worldwide have begun teaching online and providing coaching services. It's reasonable to manage all members on a personal Facebook page, but branding, professionalism, and a payment mechanism are all missing in action."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The purpose of this platform is to enable coaches to post multimedia recordings, lectures, and tutoring sessions. Exams, quizzes, and completion certificates can all be used to engage pupils. Automated membership money collection from subscribers, allowing the coach to focus on providing outstanding material instead."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While software products may expand at an insane rate due to their extensibility as software, the work and expense associated with developing effective software can be rather high. Create a minimum viable product (MVP) first, and then get some early consumers on board to offer you valuable feedback."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"management-of-rental-properties","heading":"Management of Rental Properties"},{"id":"investor-journal","heading":"Investor Journal"},{"id":"chatbot-solution-powered-by-virtual-ai","heading":"Chatbot Solution Powered by Virtual AI"},{"id":"collaborative-tool-for-teams-and-platform-for-team-development","heading":"Collaborative Tool for Teams and Platform for Team Development"},{"id":"develop-a-medical-software-program","heading":"Develop a Medical Software Program"},{"id":"itinerary-maker-for-trips","heading":"Itinerary Maker for Trips"},{"id":"solutions-for-email-delivery","heading":"Solutions for Email Delivery"},{"id":"password-organiser","heading":"Password Organiser"},{"id":"platform-for-online-training-and-coaching","heading":"Platform for Online Training and Coaching"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"austin-distel-rxpThOwuVgE-unsplash-2-2.jpg","publicURL":"/static/382c1a13ee4535f610bd499c71e81738/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg","imageMeta":{"width":1920,"height":1080},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAGlT4AqDEFP/8QAGxABAAICAwAAAAAAAAAAAAAAAgABAxIRISL/2gAIAQEAAQUCtbZPE5EQOy6KVz//xAAXEQEAAwAAAAAAAAAAAAAAAAAAARJB/9oACAEDAQE/AcWl/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEREiH/2gAIAQIBAT8BySqP/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAEhMREiQf/aAAgBAQAGPwJajxYpZQ2rFPD/xAAaEAADAQEBAQAAAAAAAAAAAAAAASERQTHR/9oACAEBAAE/IV6JZCRvHCUGoc+hzKhHKZQf/9oADAMBAAIAAwAAABCPz//EABYRAQEBAAAAAAAAAAAAAAAAAAEQMf/aAAgBAwEBPxAE1D//xAAZEQACAwEAAAAAAAAAAAAAAAAAATFhkfD/2gAIAQIBAT8QbaBf2n//xAAaEAEBAQEBAQEAAAAAAAAAAAABESEAMVGR/9oACAEBAAE/EALYDDI33i0SWJC15BlVMJ2prZ68417RUc/POHDqQfuvf//Z","aspectRatio":1.7857142857142858,"src":"/static/382c1a13ee4535f610bd499c71e81738/ea4ab/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg","srcSet":"/static/382c1a13ee4535f610bd499c71e81738/477ba/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg 175w,\n/static/382c1a13ee4535f610bd499c71e81738/06776/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg 350w,\n/static/382c1a13ee4535f610bd499c71e81738/ea4ab/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg 700w,\n/static/382c1a13ee4535f610bd499c71e81738/3055e/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg 1050w,\n/static/382c1a13ee4535f610bd499c71e81738/eff08/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg 1400w,\n/static/382c1a13ee4535f610bd499c71e81738/74fd5/austin-distel-rxpThOwuVgE-unsplash-2-2.jpg 1920w","srcWebp":"/static/382c1a13ee4535f610bd499c71e81738/89afa/austin-distel-rxpThOwuVgE-unsplash-2-2.webp","srcSetWebp":"/static/382c1a13ee4535f610bd499c71e81738/9fca7/austin-distel-rxpThOwuVgE-unsplash-2-2.webp 175w,\n/static/382c1a13ee4535f610bd499c71e81738/37a4e/austin-distel-rxpThOwuVgE-unsplash-2-2.webp 350w,\n/static/382c1a13ee4535f610bd499c71e81738/89afa/austin-distel-rxpThOwuVgE-unsplash-2-2.webp 700w,\n/static/382c1a13ee4535f610bd499c71e81738/78e7a/austin-distel-rxpThOwuVgE-unsplash-2-2.webp 1050w,\n/static/382c1a13ee4535f610bd499c71e81738/03d34/austin-distel-rxpThOwuVgE-unsplash-2-2.webp 1400w,\n/static/382c1a13ee4535f610bd499c71e81738/6833b/austin-distel-rxpThOwuVgE-unsplash-2-2.webp 1920w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__61f9452160a9ab05cc5e689a","title":"How to Create a Notes App with Strapi v4 and React Native","slug":"how-to-create-notes-app-with-strapi-v4-and-react-native","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/03/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp","excerpt":"In this tutorial, you'll learn how to create a Notes app with Strapi v4 and React Native.","custom_excerpt":"In this tutorial, you'll learn how to create a Notes app with Strapi v4 and React Native.","visibility":"public","created_at_pretty":"1 Feb 2022","published_at_pretty":"8 Feb 2022","updated_at_pretty":"27 Mar 2022","created_at":"2022-02-01T14:35:13.000+00:00","published_at":"2022-02-08T10:23:54.000+00:00","updated_at":"2022-03-27T10:41:24.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"strapi","url":"https://backend.shahednasser.com/tag/strapi/","name":"Strapi","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"strapi","url":"https://backend.shahednasser.com/tag/strapi/","name":"Strapi","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null}],"plaintext":"Strapi [https://strapi.io] is a headless CMS framework that allows you to\nintegrate CMS functionalities into any of your technical stacks. This gives you\nmore flexibility when choosing the different components that make up your\nproject.\n\nOne of the many frameworks you can integrate Strapi to is React Native\n[https://reactnative.dev]. React Native is a cross-platform framework that\nallows you to write your code in JavaScript, then deploy it on Android and iOS.\n\nIn this tutorial, you'll learn how to create a Notes app with Strapi v4 and\nReact Native. You'll be able to add notes on the Strapi backend. Then, you'll be\nable to view, edit, create, and delete notes in the React Native app.\n\nYou can find the code for this tutorial on this GitHub repository\n[https://github.com/shahednasser/strapi-react-native].\n\nSetup Strapi\nIn your terminal, run the following command to install and setup Strapi:\n\nnpx create-strapi-app@latest strapi --quickstart\n\nThis will create a new directory called strapi, and, once the installation is\ndone, a new page will open in your default browser at the Strapi backend. It's\nusually at localhost:1337.\n\nYou'll need to create an admin user. Once you're done, you'll be redirected to\nthe admin dashboard.\n\nCreate Content-Types\nClick on Content-Type Builder on the sidebar. Then, click on Create new\ncollection type under Collection Types.\n\nIn the pop-up, enter Note for display name. Then click continue.\n\nYou'll create 3 fields:\n\n 1. title: of type Text. Make sure to set it required in the Advanced Settings\n tab.\n 2. content: of type Rich Text. Make sure to set it required in the Advanced\n Settings tab.\n 3. date: of type Date. Make sure to select datetime in the Type dropdown, and\n set it required in the Advanced Settings tab.\n\nYou should have a Note collection type with the following fields:\n\nOnce you're done click Save.\n\nChange Permissions\nThe next step is to change permissions so that you can access the notes from\nReact Native.\n\nClick on Settings in the sidebar, then go to Roles under Users & Permissions\nPlugin. You'll see two entries in the table. Click on the edit icon for the\nPublic row.\n\nThen, scroll down. Under Permissions, click on Note to expand it, then select\nall permissions. Once you're done, click Save at the top right.\n\nSetup React Native\nNext, you'll set up a React Native project.\n\nFirst, you need to install the Expo CLI\n[https://docs.expo.dev/workflow/expo-cli/] if you don't have it installed:\n\nnpm i -g expo-cli\n\nNext, run the following command to create a new React Native project:\n\nexpo init notes-app\n\nChoose Blank when asked about the type of project to create.\n\nOnce that is done, change to the newly created directory notes-app and install\ndependencies with NPM:\n\ncd notes-app\nnpm i\n\nNow, you'll need to install the dependencies you'll need for this tutorial.\nFirst, start by installing some dependencies with Expo's CLI:\n\nexpo install react-native-screens react-native-safe-area-context\n\nThese dependencies are necessary to add React Navigation\n[https://reactnavigation.org], which is a library that adds navigation\ncapabilities between screens in your app.\n\nSuggested Read: React Native Navigation Tutorial.\n[https://blog.shahednasser.com/react-native-navigation-tutorial]\n\nNext, install the necessary dependencies with NPM:\n\nnpm i react-native-paper @react-navigation/native @react-navigation/native-stack react-native-pell-rich-editor react-native-webview\n\nHere's what each dependency is for:\n\n 1. react-native-paper: React Native Paper\n [https://callstack.github.io/react-native-paper/index.html] library to\n easily add styled-components in your app.\n 2. @react-navigation/native @react-navigation/native-stack: More libraries for\n React Navigation.\n 3. react-native-pell-rich-editor: a Rich Editor\n [https://github.com/wxik/react-native-rich-editor] element for React Native.\n 4. react-native-webview: required by react-native-pell-rich-editor.\n\nCreate Home Screen\nThe home screen displays a list of notes with just the title and the date. It\nwill also have a + button at the top right to add notes.\n\nCreate the file screens/HomeScreen.js with the following content:\n\nimport axios from \"axios\";\nimport { useEffect, useState } from \"react\";\nimport { FlatList, View } from \"react-native\";\nimport { Caption, List, Snackbar } from \"react-native-paper\";\n\nexport default function HomeScreen ({ navigation }) {\n const [notes, setNotes] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState('');\n\n useEffect(() => {\n loadNotes()\n\n const subscribe = navigation.addListener('focus', () => {\n loadNotes();\n });\n\n return subscribe;\n }, [])\n\n function loadNotes () {\n axios.get('http://:1337/api/notes')\n .then(({ data }) => {\n setNotes(data.data);\n setLoading(false);\n })\n .catch((e) => {\n console.error(e);\n setError('An error occurred, please try again later.');\n setLoading(false);\n });\n }\n\n return (\n \n {!loading && !notes.length &&
You have no notes
}\n (\n navigation.navigate('Editor', {\n note: item\n })}\n />\n )} \n refreshing={loading}\n onRefresh={loadNotes}\n style={{width: '100%', height: '100%'}}\n />\n 0} onDismiss={() => setError('')}>{error}\n \n )\n}\n\nYou first create the state variable notes which will hold the notes when\nreceived from the Strapi backend. You use a FlatList\n[https://reactnative.dev/docs/flatlist] component to display the notes. This\nwill render each note using the List.Item\n[https://callstack.github.io/react-native-paper/list-item.html] component from\nReact Native Paper. The title of the item will be the title of the note, and the\ndescription will be the date of the note.\n\nWhen the item in the list is clicked, the user will be taken to the Editor \nscreen (which you'll create in the next section).\n\nThe fetching of the notes will happen in the loadNotes function. This function\nis called when the screen first opens, when the screen gains focus, and when the\nflat list is refreshed.\n\nIn the loadNotes function, you send a request to http://:1337/api/notes.\nNotice that to run the app on your phone, you need to use your machine's network\nIP. So, replace with your machine's IP.\n\nThis endpoint is Strapi's Endpoint for fetching the entries\n[https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#get-entries] \nof a content type. You then set the notes state variable to the data received\nfrom Strapi.\n\nNext, you need to make changes to the App.js file to show different screens.\n\nOpen App.js and replace the content with the following:\n\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { IconButton } from 'react-native-paper';\nimport EditorScreen from './screens/EditorScreen';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n \n \n ({\n headerRight: () => (\n navigation.navigate('Editor')} />\n )\n })} />\n \n \n );\n}\n\n\nNotice that the Home screen has a button at the top right that will take you to\nthe Editor screen.\n\nNow, let's run the app. In your terminal, run the following:\n\nnpm start\n\nThis will allow you to open the app on iOS or Android. You'll need the Expo Go\n[https://expo.dev/client] app on your phone. Then, on Android, open the app and\nscan the QR code in the terminal or the developer tool page to open the app.\nAlternatively, on iOS, you need to scan the QR code in your Camera app which\nwill let you open the app in Expo Go.\n\nWhen you open the app, you'll see an empty home screen.\n\nCreate Editor Screen\nNow, you'll create the editor screen which will show the user the editor with\neither the content filled (if editing an existing note) or an empty rich text\neditor.\n\nCreate screens/EditorScreen.js with the following content:\n\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { RichEditor, RichToolbar} from \"react-native-pell-rich-editor\";\nimport { Keyboard, KeyboardAvoidingView, ScrollView, View } from 'react-native';\nimport { Button, Colors, Snackbar, Subheading, TextInput } from 'react-native-paper';\nimport axios from 'axios';\n\nexport default function EditorScreen ({ route, navigation }) {\n const editor = useRef();\n const [title, setTitle] = useState(route.params && route.params.note ? route.params.note.attributes.title : '');\n const [content, setContent] = useState(route.params && route.params.note ? route.params.note.attributes.content : '');\n const [error, setError] = useState('')\n\n function saveNote () {\n editor.current.blurContentEditor(); //lose focus for editor and close keyboard\n Keyboard.dismiss();\n const trimmedTitle = title.trim(),\n trimmedContent = content.trim();\n if (!trimmedTitle.length || !trimmedContent.length) {\n setError('Please fill both title and content');\n return;\n }\n axios({\n method: route.params && route.params.note ? 'PUT' : 'POST',\n url: 'http://:1337/api/notes' + (route.params && route.params.note ? '/' + route.params.note.id : ''),\n data: {\n data: {\n title,\n content,\n date: Date.now()\n }\n }\n }).then(() => {\n //redirect back to home screen\n navigation.goBack();\n })\n .catch((e) => {\n console.error(e);\n setError('An error occurred, please try again later')\n })\n }\n\n function deleteNote () {\n axios.delete('http://:1337/api/notes/' + route.params.note.id)\n .then(() => {\n //redirect back to home screen\n navigation.goBack();\n })\n .catch((e) => {\n console.error(e);\n setError('An error occurred, please try again later.');\n })\n }\n\n useLayoutEffect(() => {\n navigation.setOptions({\n headerTitle: content.length === 0 ? 'New Note' : 'Edit Note',\n headerRight: route.params && route.params.note ? () => (\n \n ) : () => (<>)\n });\n }, []);\n\n return (\n \n \n Content\n \n \n \n \n \n \n \n 0} onDismiss={() => setError('')}>{error}\n \n )\n}\n\nIn this code snippet, you create a editor ref variable for the Rich text editor.\nThis is necessary for the library you're using. You also create a title and \ncontent state variables. These will be used to store the input values and will\nhave as initial values the note's title and content if it exists.\n\nOn the screen, you show a rich text editor with a toolbar to add advanced text\nediting. You also add a Save button and a Delete button for existing notes.\n\nSave a Note\nWhen the Save button is clicked, you check if the note exists or is new. If the\nnote already exists, then, a PUT request is sent to \nhttp://:1337/api/notes/, where is your machine's IP and \n is the current note's ID. This Strapi endpoint is used to update an\nentry\n[https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#update-an-entry] \nin a collection.\n\nAlternatively, if the note is new, a POST request is sent to \nhttp://:1337/api/notes, where is your machine's IP. This Strapi\nendpoint is used to create an entry\n[https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#create-an-entry]\n.\n\nBoth requests accept in the body of the request a data parameter with the\nentry's data. You pass the title, content, and current date.\n\nDelete a Note\nWhen the Delete Button is clicked, a DELETE request is sent to \nhttp://:1337/api/notes/, where is your machine's IP and \n is the ID of the note to delete. Remember, this is only available if\nthe note exists.\n\nAfter the note is saved or deleted, you take the user back to the home screen.\n\nNext, you need to add the new screen to App.js. Add it after the Home screen:\n\n\n\nThat's all, now run the app if it's not running. Try first clicking on the + \nbutton at the top right of the home screen. You'll see a rich text editor with a\ntoolbar and a Save button.\n\nAdd a Note\nTry entering any content in both title and content fields. Once you're done,\nclick Save. You'll be taken back to the home screen where you can see the new\nitem you added.\n\nEdit a Note\nNow, click on a note and edit its content, then click Save. If you click on that\nnote again, you'll see that the content has been edited successfully.\n\nDelete a Note\nIf you click on a note from the home screen, you'll notice a delete button at\nthe top right of the screen.\n\nClick on the delete button and you'll be taken back to the home screen where you\ncan see your note does not exist anymore.\n\nConclusion\nThis simple note app showcases how you can connect a React Native app to Strapi.\nStrapi makes it simple to add CMS capabilities to apps using React Native. Using\na CMS like Strapi to easily manage the notes on your app allows you to also\nmanage the notes on different platforms like on the web.","html":"
Strapi is a headless CMS framework that allows you to integrate CMS functionalities into any of your technical stacks. This gives you more flexibility when choosing the different components that make up your project.
One of the many frameworks you can integrate Strapi to is React Native. React Native is a cross-platform framework that allows you to write your code in JavaScript, then deploy it on Android and iOS.
In this tutorial, you'll learn how to create a Notes app with Strapi v4 and React Native. You'll be able to add notes on the Strapi backend. Then, you'll be able to view, edit, create, and delete notes in the React Native app.
In your terminal, run the following command to install and setup Strapi:
npx create-strapi-app@latest strapi --quickstart
This will create a new directory called strapi, and, once the installation is done, a new page will open in your default browser at the Strapi backend. It's usually at localhost:1337.
You'll need to create an admin user. Once you're done, you'll be redirected to the admin dashboard.
Create Content-Types
Click on Content-Type Builder on the sidebar. Then, click on Create new collection type under Collection Types.
In the pop-up, enter Note for display name. Then click continue.
You'll create 3 fields:
title: of type Text. Make sure to set it required in the Advanced Settings tab.
content: of type Rich Text. Make sure to set it required in the Advanced Settings tab.
date: of type Date. Make sure to select datetime in the Type dropdown, and set it required in the Advanced Settings tab.
You should have a Note collection type with the following fields:
Once you're done click Save.
Change Permissions
The next step is to change permissions so that you can access the notes from React Native.
Click on Settings in the sidebar, then go to Roles under Users & Permissions Plugin. You'll see two entries in the table. Click on the edit icon for the Public row.
Then, scroll down. Under Permissions, click on Note to expand it, then select all permissions. Once you're done, click Save at the top right.
Setup React Native
Next, you'll set up a React Native project.
First, you need to install the Expo CLI if you don't have it installed:
npm i -g expo-cli
Next, run the following command to create a new React Native project:
expo init notes-app
Choose Blank when asked about the type of project to create.
Once that is done, change to the newly created directory notes-app and install dependencies with NPM:
cd notes-app\nnpm i
Now, you'll need to install the dependencies you'll need for this tutorial. First, start by installing some dependencies with Expo's CLI:
You first create the state variable notes which will hold the notes when received from the Strapi backend. You use a FlatList component to display the notes. This will render each note using the List.Item component from React Native Paper. The title of the item will be the title of the note, and the description will be the date of the note.
When the item in the list is clicked, the user will be taken to the Editor screen (which you'll create in the next section).
The fetching of the notes will happen in the loadNotes function. This function is called when the screen first opens, when the screen gains focus, and when the flat list is refreshed.
In the loadNotes function, you send a request to http://<IP>:1337/api/notes. Notice that to run the app on your phone, you need to use your machine's network IP. So, replace <IP> with your machine's IP.
This endpoint is Strapi's Endpoint for fetching the entries of a content type. You then set the notes state variable to the data received from Strapi.
Next, you need to make changes to the App.js file to show different screens.
Open App.js and replace the content with the following:
import { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { IconButton } from 'react-native-paper';\nimport EditorScreen from './screens/EditorScreen';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n <NavigationContainer>\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} options={({navigation}) => ({\n headerRight: () => (\n <IconButton icon='plus' onPress={() => navigation.navigate('Editor')} />\n )\n })} />\n </Stack.Navigator>\n </NavigationContainer>\n );\n}\n
Notice that the Home screen has a button at the top right that will take you to the Editor screen.
Now, let's run the app. In your terminal, run the following:
npm start
This will allow you to open the app on iOS or Android. You'll need the Expo Go app on your phone. Then, on Android, open the app and scan the QR code in the terminal or the developer tool page to open the app. Alternatively, on iOS, you need to scan the QR code in your Camera app which will let you open the app in Expo Go.
When you open the app, you'll see an empty home screen.
Create Editor Screen
Now, you'll create the editor screen which will show the user the editor with either the content filled (if editing an existing note) or an empty rich text editor.
Create screens/EditorScreen.js with the following content:
In this code snippet, you create a editor ref variable for the Rich text editor. This is necessary for the library you're using. You also create a title and content state variables. These will be used to store the input values and will have as initial values the note's title and content if it exists.
On the screen, you show a rich text editor with a toolbar to add advanced text editing. You also add a Save button and a Delete button for existing notes.
Save a Note
When the Save button is clicked, you check if the note exists or is new. If the note already exists, then, a PUT request is sent to http://<IP>:1337/api/notes/<note_id>, where <IP> is your machine's IP and <note_id> is the current note's ID. This Strapi endpoint is used to update an entry in a collection.
Alternatively, if the note is new, a POST request is sent to http://<IP>:1337/api/notes, where <IP> is your machine's IP. This Strapi endpoint is used to create an entry.
Both requests accept in the body of the request a data parameter with the entry's data. You pass the title, content, and current date.
Delete a Note
When the Delete Button is clicked, a DELETE request is sent to http://<IP>:1337/api/notes/<note_id>, where <IP> is your machine's IP and <note_id> is the ID of the note to delete. Remember, this is only available if the note exists.
After the note is saved or deleted, you take the user back to the home screen.
Next, you need to add the new screen to App.js. Add it after the Home screen:
That's all, now run the app if it's not running. Try first clicking on the + button at the top right of the home screen. You'll see a rich text editor with a toolbar and a Save button.
Add a Note
Try entering any content in both title and content fields. Once you're done, click Save. You'll be taken back to the home screen where you can see the new item you added.
Edit a Note
Now, click on a note and edit its content, then click Save. If you click on that note again, you'll see that the content has been edited successfully.
Delete a Note
If you click on a note from the home screen, you'll notice a delete button at the top right of the screen.
Click on the delete button and you'll be taken back to the home screen where you can see your note does not exist anymore.
Conclusion
This simple note app showcases how you can connect a React Native app to Strapi. Strapi makes it simple to add CMS capabilities to apps using React Native. Using a CMS like Strapi to easily manage the notes on your app allows you to also manage the notes on different platforms like on the web.
Strapi is a headless CMS framework that allows you to integrate CMS functionalities into any of your technical stacks. This gives you more flexibility when choosing the different components that make up your project.
One of the many frameworks you can integrate Strapi to is React Native. React Native is a cross-platform framework that allows you to write your code in JavaScript, then deploy it on Android and iOS.
In this tutorial, you'll learn how to create a Notes app with Strapi v4 and React Native. You'll be able to add notes on the Strapi backend. Then, you'll be able to view, edit, create, and delete notes in the React Native app.
In your terminal, run the following command to install and setup Strapi:
npx create-strapi-app@latest strapi --quickstart
This will create a new directory called strapi, and, once the installation is done, a new page will open in your default browser at the Strapi backend. It's usually at localhost:1337.
You'll need to create an admin user. Once you're done, you'll be redirected to the admin dashboard.
Create Content-Types
Click on Content-Type Builder on the sidebar. Then, click on Create new collection type under Collection Types.
In the pop-up, enter Note for display name. Then click continue.
You'll create 3 fields:
title: of type Text. Make sure to set it required in the Advanced Settings tab.
content: of type Rich Text. Make sure to set it required in the Advanced Settings tab.
date: of type Date. Make sure to select datetime in the Type dropdown, and set it required in the Advanced Settings tab.
You should have a Note collection type with the following fields:
Once you're done click Save.
Change Permissions
The next step is to change permissions so that you can access the notes from React Native.
Click on Settings in the sidebar, then go to Roles under Users & Permissions Plugin. You'll see two entries in the table. Click on the edit icon for the Public row.
Then, scroll down. Under Permissions, click on Note to expand it, then select all permissions. Once you're done, click Save at the top right.
Setup React Native
Next, you'll set up a React Native project.
First, you need to install the Expo CLI if you don't have it installed:
npm i -g expo-cli
Next, run the following command to create a new React Native project:
expo init notes-app
Choose Blank when asked about the type of project to create.
Once that is done, change to the newly created directory notes-app and install dependencies with NPM:
cd notes-app\nnpm i
Now, you'll need to install the dependencies you'll need for this tutorial. First, start by installing some dependencies with Expo's CLI:
You first create the state variable notes which will hold the notes when received from the Strapi backend. You use a FlatList component to display the notes. This will render each note using the List.Item component from React Native Paper. The title of the item will be the title of the note, and the description will be the date of the note.
When the item in the list is clicked, the user will be taken to the Editor screen (which you'll create in the next section).
The fetching of the notes will happen in the loadNotes function. This function is called when the screen first opens, when the screen gains focus, and when the flat list is refreshed.
In the loadNotes function, you send a request to http://<IP>:1337/api/notes. Notice that to run the app on your phone, you need to use your machine's network IP. So, replace <IP> with your machine's IP.
This endpoint is Strapi's Endpoint for fetching the entries of a content type. You then set the notes state variable to the data received from Strapi.
Next, you need to make changes to the App.js file to show different screens.
Open App.js and replace the content with the following:
Notice that the Home screen has a button at the top right that will take you to the Editor screen.
Now, let's run the app. In your terminal, run the following:
npm start
This will allow you to open the app on iOS or Android. You'll need the Expo Go app on your phone. Then, on Android, open the app and scan the QR code in the terminal or the developer tool page to open the app. Alternatively, on iOS, you need to scan the QR code in your Camera app which will let you open the app in Expo Go.
When you open the app, you'll see an empty home screen.
Create Editor Screen
Now, you'll create the editor screen which will show the user the editor with either the content filled (if editing an existing note) or an empty rich text editor.
Create screens/EditorScreen.js with the following content:
In this code snippet, you create a editor ref variable for the Rich text editor. This is necessary for the library you're using. You also create a title and content state variables. These will be used to store the input values and will have as initial values the note's title and content if it exists.
On the screen, you show a rich text editor with a toolbar to add advanced text editing. You also add a Save button and a Delete button for existing notes.
Save a Note
When the Save button is clicked, you check if the note exists or is new. If the note already exists, then, a PUT request is sent to http://<IP>:1337/api/notes/<note_id>, where <IP> is your machine's IP and <note_id> is the current note's ID. This Strapi endpoint is used to update an entry in a collection.
Alternatively, if the note is new, a POST request is sent to http://<IP>:1337/api/notes, where <IP> is your machine's IP. This Strapi endpoint is used to create an entry.
Both requests accept in the body of the request a data parameter with the entry's data. You pass the title, content, and current date.
Delete a Note
When the Delete Button is clicked, a DELETE request is sent to http://<IP>:1337/api/notes/<note_id>, where <IP> is your machine's IP and <note_id> is the ID of the note to delete. Remember, this is only available if the note exists.
After the note is saved or deleted, you take the user back to the home screen.
Next, you need to add the new screen to App.js. Add it after the Home screen:
That's all, now run the app if it's not running. Try first clicking on the + button at the top right of the home screen. You'll see a rich text editor with a toolbar and a Save button.
Add a Note
Try entering any content in both title and content fields. Once you're done, click Save. You'll be taken back to the home screen where you can see the new item you added.
Edit a Note
Now, click on a note and edit its content, then click Save. If you click on that note again, you'll see that the content has been edited successfully.
Delete a Note
If you click on a note from the home screen, you'll notice a delete button at the top right of the screen.
Click on the delete button and you'll be taken back to the home screen where you can see your note does not exist anymore.
Conclusion
This simple note app showcases how you can connect a React Native app to Strapi. Strapi makes it simple to add CMS capabilities to apps using React Native. Using a CMS like Strapi to easily manage the notes on your app allows you to also manage the notes on different platforms like on the web.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://strapi.io"},"children":[{"type":"text","value":"Strapi"}]},{"type":"text","value":" is a headless CMS framework that allows you to integrate CMS functionalities into any of your technical stacks. This gives you more flexibility when choosing the different components that make up your project."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One of the many frameworks you can integrate Strapi to is "},{"type":"element","tagName":"a","properties":{"href":"https://reactnative.dev"},"children":[{"type":"text","value":"React Native"}]},{"type":"text","value":". React Native is a cross-platform framework that allows you to write your code in JavaScript, then deploy it on Android and iOS."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, you'll learn how to create a Notes app with Strapi v4 and React Native. You'll be able to add notes on the Strapi backend. Then, you'll be able to view, edit, create, and delete notes in the React Native app."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can find the code for this tutorial on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/strapi-react-native"},"children":[{"type":"text","value":"this GitHub repository"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"setup-strapi"},"children":[{"type":"text","value":"Setup Strapi"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In your terminal, run the following command to install and setup Strapi:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"npx create-strapi-app@latest strapi --quickstart"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create a new directory called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"strapi"}]},{"type":"text","value":", and, once the installation is done, a new page will open in your default browser at the Strapi backend. It's usually at "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"localhost:1337"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-4.55.39-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":1026},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You'll need to create an admin user. Once you're done, you'll be redirected to the admin dashboard."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-4.57.11-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":479},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"create-content-types"},"children":[{"type":"text","value":"Create Content-Types"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Content-Type Builder"}]},{"type":"text","value":" on the sidebar. Then, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Create new collection type"}]},{"type":"text","value":" under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Collection Types"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the pop-up, enter "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":" for display name. Then click continue."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You'll create 3 fields:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"title"}]},{"type":"text","value":": of type Text. Make sure to set it required in the Advanced Settings tab."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"content"}]},{"type":"text","value":": of type Rich Text. Make sure to set it required in the Advanced Settings tab."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"date"}]},{"type":"text","value":": of type Date. Make sure to select "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"datetime"}]},{"type":"text","value":" in the Type dropdown, and set it required in the Advanced Settings tab."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You should have a Note collection type with the following fields:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-5.01.15-PM-1.png","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":519},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you're done click "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Save"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"change-permissions"},"children":[{"type":"text","value":"Change Permissions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next step is to change permissions so that you can access the notes from React Native."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Settings"}]},{"type":"text","value":" in the sidebar, then go to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Roles"}]},{"type":"text","value":" under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Users & Permissions Plugin"}]},{"type":"text","value":". You'll see two entries in the table. Click on the edit icon for the Public row."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-5.01.40-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":500},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, scroll down. Under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Permissions"}]},{"type":"text","value":", click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":" to expand it, then select all permissions. Once you're done, click Save at the top right."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-5.01.53-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":780},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"setup-react-native"},"children":[{"type":"text","value":"Setup React Native"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you'll set up a React Native project."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, you need to install the "},{"type":"element","tagName":"a","properties":{"href":"https://docs.expo.dev/workflow/expo-cli/"},"children":[{"type":"text","value":"Expo CLI"}]},{"type":"text","value":" if you don't have it installed:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i -g expo-cli"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, run the following command to create a new React Native project:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"expo init notes-app"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Choose "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Blank"}]},{"type":"text","value":" when asked about the type of project to create."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once that is done, change to the newly created directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"notes-app"}]},{"type":"text","value":" and install dependencies with NPM:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"cd"}]},{"type":"text","value":" notes-app\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, you'll need to install the dependencies you'll need for this tutorial. First, start by installing some dependencies with Expo's CLI:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"expo "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"install"}]},{"type":"text","value":" react-native-screens react-native-safe-area-context"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These dependencies are necessary to add "},{"type":"element","tagName":"a","properties":{"href":"https://reactnavigation.org"},"children":[{"type":"text","value":"React Navigation"}]},{"type":"text","value":", which is a library that adds navigation capabilities between screens in your app."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/react-native-navigation-tutorial"},"children":[{"type":"text","value":"Suggested Read: React Native Navigation Tutorial."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, install the necessary dependencies with NPM:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i react-native-paper @react-navigation/native @react-navigation/native-stack react-native-pell-rich-editor react-native-webview"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's what each dependency is for:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"react-native-paper"}]},{"type":"text","value":": "},{"type":"element","tagName":"a","properties":{"href":"https://callstack.github.io/react-native-paper/index.html"},"children":[{"type":"text","value":"React Native Paper"}]},{"type":"text","value":" library to easily add styled-components in your app."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"@react-navigation/native @react-navigation/native-stack"}]},{"type":"text","value":": More libraries for React Navigation."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"react-native-pell-rich-editor"}]},{"type":"text","value":": a "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/wxik/react-native-rich-editor"},"children":[{"type":"text","value":"Rich Editor"}]},{"type":"text","value":" element for React Native."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"react-native-webview"}]},{"type":"text","value":": required by "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"react-native-pell-rich-editor"}]},{"type":"text","value":"."}]}]},{"type":"element","tagName":"h2","properties":{"id":"create-home-screen"},"children":[{"type":"text","value":"Create Home Screen"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The home screen displays a list of notes with just the title and the date. It will also have a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" button at the top right to add notes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"screens/HomeScreen.js"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" axios "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"axios\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" useEffect"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" useState "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" FlatList"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" View "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"react-native\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Caption"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" List"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Snackbar "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"react-native-paper\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"HomeScreen"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" navigation "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"notes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setNotes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"loading"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setLoading"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"error"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setError"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"loadNotes"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" subscribe "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addListener"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'focus'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"loadNotes"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" subscribe"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"loadNotes"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n axios"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'http://:1337/api/notes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" data "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setNotes"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setLoading"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"catch"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setError"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'An error occurred, please try again later.'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setLoading"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"text","value":"loading "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"text","value":"notes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Caption style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"textAlign"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'center'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"marginTop"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"10"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"You have no notes"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Caption"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"FlatList\n data"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"notes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n renderItem"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" item "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"List"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Item \n key"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"item"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"id"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"item"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n description"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"item"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"date"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n onPress"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"navigate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Editor'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"note"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" item\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n refreshing"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"loading"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n onRefresh"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"loadNotes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'100%'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"height"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'100%'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Snackbar visible"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"error"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" onDismiss"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setError"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"error"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Snackbar"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You first create the state variable "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"notes"}]},{"type":"text","value":" which will hold the notes when received from the Strapi backend. You use a "},{"type":"element","tagName":"a","properties":{"href":"https://reactnative.dev/docs/flatlist"},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" component to display the notes. This will render each note using the "},{"type":"element","tagName":"a","properties":{"href":"https://callstack.github.io/react-native-paper/list-item.html"},"children":[{"type":"text","value":"List.Item"}]},{"type":"text","value":" component from React Native Paper. The title of the item will be the title of the note, and the description will be the date of the note."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the item in the list is clicked, the user will be taken to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Editor"}]},{"type":"text","value":" screen (which you'll create in the next section)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The fetching of the notes will happen in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"loadNotes"}]},{"type":"text","value":" function. This function is called when the screen first opens, when the screen gains focus, and when the flat list is refreshed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"loadNotes"}]},{"type":"text","value":" function, you send a request to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://:1337/api/notes"}]},{"type":"text","value":". Notice that to run the app on your phone, you need to use your machine's network IP. So, replace "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" with your machine's IP."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This endpoint is Strapi's Endpoint for "},{"type":"element","tagName":"a","properties":{"href":"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#get-entries"},"children":[{"type":"text","value":"fetching the entries"}]},{"type":"text","value":" of a content type. You then set the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"notes"}]},{"type":"text","value":" state variable to the data received from Strapi."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you need to make changes to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App.js"}]},{"type":"text","value":" file to show different screens."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Open "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App.js"}]},{"type":"text","value":" and replace the content with the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" NavigationContainer "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'@react-navigation/native'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" createNativeStackNavigator "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'@react-navigation/native-stack'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" IconButton "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-native-paper'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" EditorScreen "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./screens/EditorScreen'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" HomeScreen "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./screens/HomeScreen'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" Stack "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"createNativeStackNavigator"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"App"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"NavigationContainer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Stack"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Navigator"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Stack"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Screen name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Home\""}]},{"type":"text","value":" component"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"HomeScreen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" options"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"headerRight"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"IconButton icon"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'plus'"}]},{"type":"text","value":" onPress"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"navigate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Editor'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Stack"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Navigator"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"NavigationContainer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Home"}]},{"type":"text","value":" screen has a button at the top right that will take you to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Editor"}]},{"type":"text","value":" screen."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, let's run the app. In your terminal, run the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" start"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will allow you to open the app on iOS or Android. You'll need the "},{"type":"element","tagName":"a","properties":{"href":"https://expo.dev/client"},"children":[{"type":"text","value":"Expo Go"}]},{"type":"text","value":" app on your phone. Then, on Android, open the app and scan the QR code in the terminal or the developer tool page to open the app. Alternatively, on iOS, you need to scan the QR code in your Camera app which will let you open the app in Expo Go."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you open the app, you'll see an empty home screen."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/IMG_2484-2.PNG","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":1904},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"create-editor-screen"},"children":[{"type":"text","value":"Create Editor Screen"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, you'll create the editor screen which will show the user the editor with either the content filled (if editing an existing note) or an empty rich text editor."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"screens/EditorScreen.js"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" useLayoutEffect"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" useRef"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" useState "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" RichEditor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" RichToolbar"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"react-native-pell-rich-editor\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Keyboard"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" KeyboardAvoidingView"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" ScrollView"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" View "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-native'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Colors"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Snackbar"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Subheading"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" TextInput "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-native-paper'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" axios "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"EditorScreen"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" navigation "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" editor "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setTitle"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"title "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setContent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"content "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"error"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setError"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"saveNote"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n editor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"current"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"blurContentEditor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//lose focus for editor and close keyboard"}]},{"type":"text","value":"\n Keyboard"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"dismiss"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" trimmedTitle "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"trim"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n trimmedContent "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"trim"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"text","value":"trimmedTitle"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"||"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"text","value":"trimmedContent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setError"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Please fill both title and content'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"axios"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"method"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'PUT'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'POST'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"url"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'http://:1337/api/notes'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"id "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"data"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"data"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"date"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Date"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"now"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//redirect back to home screen"}]},{"type":"text","value":"\n navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"goBack"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"catch"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setError"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'An error occurred, please try again later'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"deleteNote"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n axios"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"delete"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'http://:1337/api/notes/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"id"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//redirect back to home screen"}]},{"type":"text","value":"\n navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"goBack"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"catch"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setError"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'An error occurred, please try again later.'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useLayoutEffect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n navigation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setOptions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"headerTitle"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'New Note'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Edit Note'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"headerRight"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" route"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"note "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Button color"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"Colors"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"redA100"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" onPress"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"deleteNote"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Delete"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Button"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"View style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"margin"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"10"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"flex"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"justifyContent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'space-between'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"TextInput label"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Title\""}]},{"type":"text","value":" value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" onChangeText"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"setTitle"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" mode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Subheading"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Content"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Subheading"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"RichToolbar\n editor"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"editor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"ScrollView keyboardDismissMode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'onDrag'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"KeyboardAvoidingView behavior"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"position\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\tstyle"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"flex"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" keyboardVerticalOffset"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"250"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"RichEditor \n style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"flex"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n ref"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"editor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n onChange"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"setContent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n initialContentHTML"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n placeholder"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Start typing...'"}]},{"type":"text","value":"\n useContainer "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Button onPress"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"saveNote"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" mode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"contained\""}]},{"type":"text","value":" style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"marginTop"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"20"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n Save\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Button"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"KeyboardAvoidingView"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"ScrollView"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Snackbar visible"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"error"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" onDismiss"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setError"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"''"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"error"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Snackbar"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this code snippet, you create a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"editor"}]},{"type":"text","value":" ref variable for the Rich text editor. This is necessary for the library you're using. You also create a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"title"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"content"}]},{"type":"text","value":" state variables. These will be used to store the input values and will have as initial values the note's title and content if it exists."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the screen, you show a rich text editor with a toolbar to add advanced text editing. You also add a Save button and a Delete button for existing notes."}]},{"type":"element","tagName":"h3","properties":{"id":"save-a-note"},"children":[{"type":"text","value":"Save a Note"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the Save button is clicked, you check if the note exists or is new. If the note already exists, then, a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"PUT"}]},{"type":"text","value":" request is sent to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://:1337/api/notes/"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" is your machine's IP and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" is the current note's ID. This Strapi endpoint is used to "},{"type":"element","tagName":"a","properties":{"href":"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#update-an-entry"},"children":[{"type":"text","value":"update an entry"}]},{"type":"text","value":" in a collection."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alternatively, if the note is new, a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"POST"}]},{"type":"text","value":" request is sent to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://:1337/api/notes"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" is your machine's IP. This Strapi endpoint is used to "},{"type":"element","tagName":"a","properties":{"href":"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#create-an-entry"},"children":[{"type":"text","value":"create an entry"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Both requests accept in the body of the request a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" parameter with the entry's data. You pass the title, content, and current date."}]},{"type":"element","tagName":"h3","properties":{"id":"delete-a-note"},"children":[{"type":"text","value":"Delete a Note"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the Delete Button is clicked, a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"DELETE"}]},{"type":"text","value":" request is sent to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://:1337/api/notes/"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" is your machine's IP and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" is the ID of the note to delete. Remember, this is only available if the note exists."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After the note is saved or deleted, you take the user back to the home screen."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you need to add the new screen to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App.js"}]},{"type":"text","value":". Add it after the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Home"}]},{"type":"text","value":" screen:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Stack"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"Screen name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Editor\""}]},{"type":"text","value":" component"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"EditorScreen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That's all, now run the app if it's not running. Try first clicking on the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" button at the top right of the home screen. You'll see a rich text editor with a toolbar and a Save button."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/IMG_2485-2.PNG","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":1904},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"add-a-note"},"children":[{"type":"text","value":"Add a Note"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Try entering any content in both title and content fields. Once you're done, click Save. You'll be taken back to the home screen where you can see the new item you added."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/IMG_2472-2.PNG","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":1904},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"edit-a-note"},"children":[{"type":"text","value":"Edit a Note"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, click on a note and edit its content, then click Save. If you click on that note again, you'll see that the content has been edited successfully."}]},{"type":"element","tagName":"h2","properties":{"id":"delete-a-note-1"},"children":[{"type":"text","value":"Delete a Note"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you click on a note from the home screen, you'll notice a delete button at the top right of the screen."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/IMG_2471-2.PNG","className":["kg-image"],"alt":"","loading":"lazy","width":880,"height":1904},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Click on the delete button and you'll be taken back to the home screen where you can see your note does not exist anymore."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This simple note app showcases how you can connect a React Native app to Strapi. Strapi makes it simple to add CMS capabilities to apps using React Native. Using a CMS like Strapi to easily manage the notes on your app allows you to also manage the notes on different platforms like on the web."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"setup-strapi","heading":"Setup Strapi","items":[{"id":"create-content-types","heading":"Create Content-Types"},{"id":"change-permissions","heading":"Change Permissions"}]},{"id":"setup-react-native","heading":"Setup React Native"},{"id":"create-home-screen","heading":"Create Home Screen"},{"id":"create-editor-screen","heading":"Create Editor Screen","items":[{"id":"save-a-note","heading":"Save a Note"},{"id":"delete-a-note","heading":"Delete a Note"},{"id":"add-a-note","heading":"Add a Note"}]},{"id":"edit-a-note","heading":"Edit a Note"},{"id":"delete-a-note-1","heading":"Delete a Note"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp","publicURL":"/static/53fcf20de38e44c013aa2b39f34c0a28/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp","imageMeta":{"width":1000,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/webp;base64,UklGRkwAAABXRUJQVlA4IEAAAABwAwCdASoUAAgAPtFUo0uoJKMhsAgBABoJaQAAXe9xyZhdNAAA/vOsacWtB4DZdTywIyPM0KjJjVgEYCYgAAAA","aspectRatio":2.364864864864865,"src":"/static/53fcf20de38e44c013aa2b39f34c0a28/89afa/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp","srcSet":"/static/53fcf20de38e44c013aa2b39f34c0a28/9fca7/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 175w,\n/static/53fcf20de38e44c013aa2b39f34c0a28/37a4e/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 350w,\n/static/53fcf20de38e44c013aa2b39f34c0a28/89afa/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 700w,\n/static/53fcf20de38e44c013aa2b39f34c0a28/47f67/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 1000w","srcWebp":"/static/53fcf20de38e44c013aa2b39f34c0a28/89afa/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp","srcSetWebp":"/static/53fcf20de38e44c013aa2b39f34c0a28/9fca7/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 175w,\n/static/53fcf20de38e44c013aa2b39f34c0a28/37a4e/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 350w,\n/static/53fcf20de38e44c013aa2b39f34c0a28/89afa/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 700w,\n/static/53fcf20de38e44c013aa2b39f34c0a28/47f67/How-to-Create-a-Notes-App-with-Strapi-v4-and-React-Native-5.webp 1000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__61b1cb7ad752820612f17bad","title":"React Native Navigation Tutorial","slug":"react-native-navigation-tutorial","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/12/nathan-da-silva-FO7kUmBYVi0-unsplash-2.jpg","excerpt":"In this tutorial, you'll learn how to use React Navigation in your React Native app.","custom_excerpt":"In this tutorial, you'll learn how to use React Navigation in your React Native app.","visibility":"public","created_at_pretty":"9 Dec 2021","published_at_pretty":"9 Dec 2021","updated_at_pretty":"20 Dec 2021","created_at":"2021-12-09T09:25:14.000+00:00","published_at":"2021-12-09T13:38:31.000+00:00","updated_at":"2021-12-20T08:50:59.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"React Native [https://reactnative.dev] is one of the most popular cross-platform\napp development frameworks. Using JavaScript, you can develop native apps for\nboth Android and iOS.\n\nOne important part of creating apps is being able to navigate between screens.\nIn this tutorial, you'll learn how to use React Navigation\n[https://reactnavigation.org] in your app to add navigation. This will include\nbasic navigation from one screen to another, going back to the previous screen,\npassing parameters, listening to events, and more.\n\nThis tutorial will not explain the basics of creating a React Native app. If\nyou're interested in learning about that, you can check out my other tutorial \nReact Native Tutorial: Create Your First App\n[https://blog.shahednasser.com/react-native-tutorial-create-your-first-app].\n\nYou can find the code for this tutorial on this GitHub repository\n[https://github.com/shahednasser/react-navigation-tutorial].\n\nPrerequisites \nMake sure you have both Node.js [https://nodejs.org/en/] and NPM installed on\nyour machine. You can check if they're installed with the following command:\n\nnode -v\nnpm -v\n\nIf they're not installed, you can install Node.js [https://nodejs.org/en/] and\nNPM will be installed automatically with it.\n\n After that, make sure you install Expo [https://expo.dev]'s CLI if you don't\nhave it installed:\n\nnpm install -g expo-cli\n\nIf you're not familiar with what Expo is, Expo provides a set of tools built\naround React. Most importantly, it allows you to write and build your React\nNative app in minutes.\n\nYou should also install Expo Go [https://expo.dev/client] on your device to be\nable to test the app as we go through the tutorial.\n\nProject Setup\nStart by creating a new React Native project using Expo's CLI:\n\nexpo init react-navigation-tutorial —npm\n\nYou'll be then prompted to choose the type of app, choose \"blank\".\n\nAfter that the init command will install the dependencies you need for your\nReact Native project.\n\nOnce it's done, change to the directory of the project:\n\ncd react-navigation-tutorial\n\nNow, you'll install the dependencies required to use React Navigation. First,\ninstall the building blocks libraries using Expo's CLI with the following\ncommand:\n\nexpo install react-native-screens react-native-safe-area-context\n\nSecond, install the native stack navigator library:\n\nnpm install @react-navigation/native-stack\n\nNow, you have all the libraries required to start using React Navigation.\n\nFinally, install React Native Paper\n[https://callstack.github.io/react-native-paper/index.html] to have\nbeautifully-styled components in your app:\n\nnpm install react-native-paper\n\nSet Up React Navigation\nBefore you can start adding routes to your app, you need to create a Stack\nNavigator. This stack navigator will be used to create screens and navigate\nbetween them.\n\nIn App.js, change the content to the following:\n\nimport React from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator()\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n );\n}\n\n\nNotice that in the returned value of App, you first have at the\ntop of the elements. This is just used to make sure all screens share the same\ntheme.\n\nNext, you have the . This component manages the navigation\ntree and contains the navigation state. So, it should wrap Stack navigators.\n\nInside you have . Stack is created using \ncreateNativeStackNavigator. This function returns an object containing 2\nproperties: Screen and Navigator. The Navigator property is a React element and\nit should be used to wrap the Screen elements to manage routing configurations.\n\nSo, inside you'll have one or more components.\nFor each route, you'll have a component. Now, you just have one\ncomponent that points to the Home route.\n\nNotice that a Screen component takes the name prop, which is the name of the\nroute and will be referenced later on when navigating to this route, and the \ncomponent property which is the component to render for this route.\n\nAs you can see, you're passing HomeScreen component to the Home route, so you\nneed to create it now.\n\nCreate the directory screens, and inside that directory create a new file \nHomeScreen.js with the following content:\n\nimport React from 'react';\nimport { ScrollView, StyleSheet } from 'react-native';\nimport { Button, Card } from 'react-native-paper';\nimport { DefaultTheme } from 'react-native-paper';\n\nfunction HomeScreen () {\n return (\n \n \n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n scrollView: {\n backgroundColor: DefaultTheme.colors.background,\n paddingTop: 10\n },\n card: {\n width: '90%',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n});\n\nexport default HomeScreen\n\nThis will create a basic home screen with a ScrollView\n[https://reactnative.dev/docs/scrollview] component containing a Card\n[https://callstack.github.io/react-native-paper/card.html] component with the\ntitle \"Home Screen\".\n\nYou just created your first route with React Navigation! Let's test it out.\n\nIn your terminal run to start your app:\n\nnpm start\n\nThen, you'll be able to run the app on Expo Go on your phone by scanning the QR\ncode on the Expo Go app on Android or on the Camera app on iOS.\n\nOnce the app run, you'll see the Home screen that you created as it's the\ndefault and only route.\n\nNavigate to Another Screen\nIn this section, you'll learn how to navigate from one screen to another.\n\nScreens that are inside the Stack Navigation, like HomeScreen in this app,\nreceive a navigation prop. This prop allows us to navigate to other screens in\nthe app.\n\nLet's first create the screen you'll navigate to. Create the file \nscreens/BookScreen.js with the following content:\n\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Card } from 'react-native-paper';\nimport { DefaultTheme } from 'react-native-paper';\n\nfunction BookScreen () {\n return (\n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'column',\n backgroundColor: DefaultTheme.colors.background,\n alignItems: 'center',\n paddingTop: 10\n },\n card: {\n width: '90%'\n }\n});\n\nexport default BookScreen;\n\nThis screen is similar to HomeScreen. It just shows a card with the title \"This\nis Books Screen\".\n\nNext, add the new route in App.js for BookScreen below the \"Home\" route:\n\n\n\nDon't forget to import BookScreen below the imports at the beginning of App.js:\n\nimport BookScreen from './screens/BookScreen';\n\nNow, you can navigate to the \"Book\" route inside this stack navigation. To see\nhow it works, you'll add a button in HomeScreen that when the user clicks will\nnavigate to BookScreen.\n\nIn HomeScreen, add the navigation prop to the function:\n\nfunction HomeScreen ({ navigation })\n\nThen, change the returned value of the function to the following:\n\nreturn (\n \n \n \n \n \n \n \n \n )\n\nYou change the title of the card to \"Navigate to 'Book' Screen\". Then, inside\nthe content of the card, you add a Button\n[https://callstack.github.io/react-native-paper/button.html] component with \nonPress listener. This listener will be executed when the user presses on the\nbutton.\n\nInside the listener, you use the navigation prop to navigate to the Book screen\nusing the method navigate. The method navigate takes the name of the route to\nnavigate to.\n\nLet's test it out. Run the app again if it isn't running. You should see a new\nbutton on the Home screen.\n\nTry clicking on the Navigate button. You'll be navigated to the BookScreen.\n\nNotice how the back button in the navigation bar is added automatically when you\nnavigate to another screen. You can use it to go back to the previous screen,\nwhich is in this case the Home screen.\n\nNavigate with Parameters\nIn a lot of cases, you'll need to navigate to another screen and pass it\nparameters. In this section, you'll create an input that allows the user to\nenter their name, then when they submit you'll open a new screen called \nNameScreen which will show a greeting to the user with the name they entered.\n\nStart by adding a new state variable to hold the value of the input you'll add\nsoon in HomeScreen.js:\n\nconst [name, setName] = useState('');\n\nMake sure to add an import for useState at the beginning of the file:\n\nimport React, { useState } from 'react';\n\nThen, add a new Card component below the existing one:\n\n\n \n \n setName(text)} style={styles.textInput} />\n \n \n\n\nThis new card has a TextInput\n[https://callstack.github.io/react-native-paper/text-input.html] with the value \nname, and on the onChangeText event, which occurs when the user makes changes to\nthe text inside the input, you change the value of the name state variable.\n\nBelow the input, you have a button that is disabled when the name state variable\nis empty. You also add an onPress event listener which navigates the user to the \nName route. \n\nNotice that you're using the same navigation.navigate method that you used\nbefore to navigate to the \"Book\" route, however, this time you pass a second\nparameter to the method. This method accepts as a second parameter an object of\nparameters you want to pass. Here, you pass the name variable inside the object.\n\nOne last thing you need to do in the HomeScreen is change the styles object to\nthe following:\n\nconst styles = StyleSheet.create({\n scrollView: {\n backgroundColor: DefaultTheme.colors.background,\n paddingTop: 10\n },\n card: {\n width: '90%',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginBottom: 10\n },\n textInput: {\n marginBottom: 10\n }\n});\n\nThis just makes some changes to the card property and adds a new property \ntextInput.\n\nYou'll now create the NameScreen which will be the component for the \"Name\"\nroute you'll add soon. Create screens/NameScreen.js with the following content:\n\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Card } from 'react-native-paper';\nimport { DefaultTheme } from 'react-native-paper';\n\nfunction NameScreen ({ route }) {\n const { name } = route.params;\n\n return (\n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'column',\n backgroundColor: DefaultTheme.colors.background,\n alignItems: 'center',\n paddingTop: 10\n },\n card: {\n width: '90%'\n }\n});\n\nexport default NameScreen;\n\nThis screen is essentially the same as BookScreen, however, notice the route \nprop passed to the function.\n\nAs mentioned before, the components inside the navigation stack receive a \nnavigation prop to navigate between screens. They also receive a route prop\nwhich you can use to get the parameters passed to the screen using route.params.\n\nSo, in NameScreen, you retrieve the value entered in the Name input in the \nHomeScreen, which is passed when navigating to the NameScreen when the button is\nclicked using route.params:\n\nconst { name } = route.params;\n\nYou then show the user a greeting inside a card using the name parameter.\n\nOne last thing left to do is add the \"Name\" route to the navigation stack. Add a\nnew below the previous ones in App.js:\n\n\n\nAnd import NameScreen below other imports at the beginning of the file:\n\nimport NameScreen from './screens/NameScreen';\n\nLet's test it out. Run the app if it isn't already running. You'll see that\nthere's a new card on the Home screen with an input and a button.\n\nTry entering your name, then click the \"Navigate\" button below the input. You'll\nbe navigated to the NameScreen and you'll see your name.\n\nYou can try going back then changing the value of the name. The name in the \nNameScreen will change accordingly.\n\nConfigure the Header\nChange the title\nSometimes, you want the title of a route to be different than the name of the\nroute, or you want the title to be dynamic based on a parameter passed or some\nother logic.\n\nIn this section, you'll add a new input in HomeScreen that will let you to enter\na title, then on clicking the navigate button you'll be navigated to a new\nscreen TitleScreen, whose title will change based on the title entered in the\ninput in HomeScreen.\n\nStart by adding a new state variable in HomeScreen.js to store the title:\n\nconst [title, setTitle] = useState('');\n\nThen, add a new card below the previous cards:\n\n\n \n \n setTitle(text)} style={styles.textInput} />\n \n \n \n\nThis is pretty much the same as the card we added in the previous section. The\nonly difference is that it uses the title state variable, and the listener for \nonPress for the button navigates to the route \"Title\", passing the title as a\nparameter.\n\nNext, create the file screens/Title.js with the following content:\n\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Card } from 'react-native-paper';\nimport { DefaultTheme } from 'react-native-paper';\n\nfunction TitleScreen () {\n return (\n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'column',\n backgroundColor: DefaultTheme.colors.background,\n alignItems: 'center',\n paddingTop: 10\n },\n card: {\n width: '90%'\n }\n});\n\nexport default TitleScreen;\n\nThis screen has nothing special. It just shows a card with the title \"This is\ntitle screen\". It doesn't even use the title parameter.\n\nThat's because you can change the title of a screen by passing an options \nparameter to when adding the route.\n\nIn App.js, add an import for TitleScreen below other imports at the beginning of\nthe file:\n\nimport TitleScreen from './screens/TitleScreen';\n\nThen, add the new route below previous :\n\n ({title: route.params.title})} />\n\nEvery Stack.Screen component can take an options prop. The options prop can be\nan object like so:\n\noptions={{title: \"Hello\"}}\n\nThis is enough if your options are static. However, if the value for any of the\noptions is dynamic, like in this example, you can instead pass it a function\nthat returns an object. This function can receive as a parameter route, which is\nsimilar to the route parameter you used in NameScreen:\n\noptions={({route}) => ({title: route.params.title})}\n\nIn this function, you return an object that has a title property with the value \nroute.params.title. So, when the user enters a title in the input and clicks on\nthe Navigate button, the title will be passed to the route, which will change\nthe title of \"Title\" route using the function passed to the options prop.\n\nLet's test it out. Run the app if it's not running already. You should see a new\ncard on the Home screen with a new input:\n\nTry entering any title you want in the input then click on Navigate. You'll see\nthat you'll be navigated to the TitleScreen, but the title will be the value you\nentered in the input.\n\nYou can try going back then changing the value entered in the input. The title\nof the screen will change accordingly.\n\nAdd Header Button\nAnother option you can add is header buttons. You can customize what your header\nshows on the left and right by using the headerRight and headerLeft properties\nin the options param of .\n\nIn this section, you'll add a button to the right of the header of the Home\nscreen which will show a user an alert when they click on it.\n\nIn App.js, add to the \"Home\" route a prop option:\n\n (\n alert('You\\'re awesome!')} color={DefaultTheme.colors.notification} />\n )\n}} />\n\nIn the options prop, you pass an object with the property headerRight. The \nheaderRight property can be a component that you can render elements inside. You\nrender an IconButton\n[https://callstack.github.io/react-native-paper/icon-button.html] component,\nwhich is a button that only has an icon without text. In the onPress event\nlistener, you show an alert to the user.\n\nThat's all. Run the app if it isn't running already. You'll see a new icon at\nthe top right of the header in Home Screen.\n\nClick on it and you'll see an alert.\n\nNavigation Events\nIn React Navigation, you can subscribe to two events: focus and blur. The focus \nevent will occur every time the screen is opened and is currently the main\nscreen. The blur event will occur whenever a screen was in focus but navigation\noccurs that makes the screen not the current main screen. Simply put, the focus \nevent is when the screen is visible to the user, and the blur event occurs when\na screen was visible to a user but isn't anymore. \n\nIn this section, you'll add a counter that will count how many times you\nnavigated to other screens from the home screen. So, this counter will increment\nin the blur event.\n\nTo subscribe to events, in a useEffect callback inside a component, you can use \nnavigation.addListener passing it the name of the event as a first parameter,\nand the event handler as a second parameter. The addListener method returns an\nunsubscribe function which you should return in the useEffect callback.\n\nIn HomeScreen.js, add an import for useEffect at the beginning of the file:\n\nimport React, { useEffect, useState } from 'react';\n\nThen, add a new state variable counter inside the HomeScreen component:\n\nconst [counter, setCounter] = useState(0);\n\nAfter that add the useEffect callback that will register the event handle for\nthe blur event:\n\nuseEffect(() => {\n return navigation.addListener('blur', () => {\n setCounter(counter + 1);\n });\n });\n\nAs you can see, you use navigation.addListener to add an event listener to the \nblur event. The function passed as a second parameter is the handler of the\nevent. It will be executed whenever the screen is out of focus (not the screen\nvisible to the user). Inside the event handler, you increment the counter by 1.\n\nFinally, you'll show the counter at the top of the screen. In ScrollView, add a\nnew card before the previously added cards:\n\n\n\t\n\n\nLet's test it out. Run the app if it's not already running. You should see a\ncard with a count of navigation at the top of the screen.\n\nGo Back\nThe last thing you'll learn in this tutorial is how to go back to the previous\nscreen. As you've seen throughout the tutorial, when you navigate to a screen\nyou'll see a back button in the header which you can use to go back to the\nprevious screen.\n\nAlthough this is sufficient in most cases, sometimes you want to go back to the\nprevious screen programmatically. You'll create in this section a new screen \nBackScreen which you can go to from the HomeScreen. This screen will have a back\nbutton in its content and when you click on it you can go back to the previous\nscreen, which is the HomeScreen.\n\nCreate the file screens/BackScreen.js with the following content:\n\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Button, Card } from 'react-native-paper';\nimport { DefaultTheme } from 'react-native-paper';\n\nfunction BackScreen ({ navigation }) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'column',\n backgroundColor: DefaultTheme.colors.background,\n alignItems: 'center',\n paddingTop: 10\n },\n card: {\n width: '90%'\n }\n});\n\nexport default BackScreen;\n\nThis screen is pretty much the same as other screens. The things you should note\nis that, first, the screen has uses the navigation prop that is passed to\ncomponents inside the navigation stack. Second, the screen has a button inside a\ncard which, on press, will use the navigation prop to go back using the goBack \nmethod:\n\n
![](\"https://static.tapfiliate.com/5fcf4fb9056cd927104425.png?a=86255-ae3f95&s=2171241-632e37\")
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.55.08-AM.png\")
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.56.30-AM.png\")
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-12.57.52-AM.png\")
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-1.00.21-AM.png\")
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-10-at-1.00.43-AM.png\")
![\"Place](\"https://res.cloudinary.com/shahed/image/upload/v1633434557/Place_your_Ad_here_178_x_100_px_-3_kvf6uo.png\")
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-4.55.39-PM.png.jpeg\")
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-4.57.11-PM.png.jpeg\")
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-5.01.15-PM-1.png\")
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-5.01.40-PM.png.jpeg\")
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-01-31-at-5.01.53-PM.png.jpeg\")
![](\"https://backend.shahednasser.com/content/images/2022/03/IMG_2484-2.PNG\")
![](\"https://backend.shahednasser.com/content/images/2022/03/IMG_2485-2.PNG\")
![](\"https://backend.shahednasser.com/content/images/2022/03/IMG_2472-2.PNG\")
![](\"https://backend.shahednasser.com/content/images/2022/03/IMG_2471-2.PNG\")