TypeScript React Native

Open-source TypeScript projects categorized as React Native

Top 23 TypeScript React Native Projects

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    Project mention: Ask HN: Is it time for a new Storybook? | news.ycombinator.com | 2022-11-19

    I'm sure many have heard of Storybook [0]. I've used it pretty much since the start from ~2016 (back when Angular was cargo-culting it like mad). I've always had generally negative experiences with it:

    1) Messy Javascript API resulting in inexpressive storybook files, particularly for big frameworks like Angular and big components.

    2) Slow AF with webpack/terser/etc. And that's ebfore you start bolting on crazy addons like compodoc.

    3) Tries to solve so many different problems (just a subjective opinion of mine).

    4) Insane levels of "framework magic", particularly when I've used it with Angular, but also in other scenarios too.

    ---

    So, I wanted to ask HN to gauge the appetite for a similar but not same kind of Storybook:

    1) Extremely expressive Javascript API. Think Jest.

    2) Go CLI (allowing direct interface with ESBuild, etc.).

    3) ESBuild-centric (rather than webpack, or worse, addons [1]).

    4) Typescript-centric (rather than seeming like an after-thought).

    5) Much less framework magic (think React, Redux, etc. Stick mostly to simple explicit JS behaviors).

    6) Probably a lot more that haven't come to mind yet.

    Before I go any further with it, it would be amazing to hear what you guys think about all of this. What are your thoughts about Storybook? Too much tech debt for them to modernize? Am I just being silly and picky about Storybook? Am I the crazy one?

    Thanks HN!

    [0] https://storybook.js.org/

    [1] https://storybook.js.org/addons/storybook-addon-turbo-build

  • Joplin

    Joplin - an open source note taking and to-do application with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.

    Project mention: How do you organize your tokens and other SD things? | reddit.com/r/StableDiffusion | 2022-11-26
  • Zigi

    The context switching struggle is real. Zigi makes context switching a thing of the past. It monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack!

  • taro

    开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

  • react-hook-form

    📋 React Hooks for form state management and validation (Web + React Native)

    Project mention: What's new in Svelte: November 2022 | news.ycombinator.com | 2022-11-09

    Does any body uses Redux these days? For forms, native FormData api covers most of the use cases. And for more advanced ones, React Hook Form is the best https://react-hook-form.com/.

    For other types of state management:

  • TypeORM

    ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

    Project mention: Building a website directory with Next.js, Tailwind CSS, and Prisma | dev.to | 2022-11-18

    There are many popular ORM libraries for Node.js: Prisma, Sequelize, TypeORM, and others.

  • SWR

    React Hooks for Data Fetching

    Project mention: Build a Jamstack Blog with Xata and Cloudinary | dev.to | 2022-11-23

    import { useState, useEffect } from 'react' import { useRouter } from 'next/router' import { Button, Textarea, Input, FormControl, FormLabel, Container, Text, Spacer, Icon, Link, Spinner, Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react' import { FaGithub } from 'react-icons/fa' import { toast } from 'react-toastify' import generateSocialImage from '../../components/GenerateImg' import useSWR from 'swr' const fetcher = (...args) => fetch(...args).then((res) => res.json()) const UpdatePost = () => { const [title, setTitle] = useState(''); const [body, setBody] = useState(''); const [tags, setTags] = useState(''); const router = useRouter(); const { id } = router.query; //Get data from xata db const { data, error } = useSWR(`/api/post?id=${id}`, fetcher) if (error) return ( Error! Failed to Load. ) if (!data) return // store data in state const res = data.post; // handle form submit const handleSubmit = async () => { //Convert string tags to array const newTags = tags || res.tags.toString(); console.log(newTags) // Reducing number of accepted tags to 4 if user inputs more const tagArr = newTags.split(/[, ]+/); let tags_new; if (tagArr.length >= 4) { tags_new = tagArr.slice(0, 4) } else tags_new = tagArr; console.log(tags_new); //Generate social card with cloudinary const socialImage = generateSocialImage({ title: title || res.title, tagline: tags_new.map(tag => `#${tag}`).join(' '), cloudName: 'dqwrnan7f', imagePublicID: 'dex/example-black_iifqhm', }); console.log(socialImage); //Make add create request let post = { title: title || res.title, body: body || res.body, image: socialImage, tags: tags_new, } const response = await fetch('/api/update', { method: 'POST', headers: { "Content-Type": "application/json", }, body: JSON.stringify({ post, id }) }) if (response.ok) { toast.success("post updated successfully", { theme: "dark", autoClose: 8000 }) window?.location.replace('/'); } } return ( Blog with Xata and Cloudinary Post Title { setTitle(e.target.value) }} /> Post Tags { setTags(e.target.value) }} /> Post Body { setBody(e.target.value) }} /> handleSubmit()}>Submit ) } export default UpdatePost

    Enter fullscreen mode Exit fullscreen mode

    For our other reusable components AllPosts.js and CreateModal.js, we have:

    AllPost.js

        import NextLink from 'next/link'
        import { Box, Image, Badge, Flex, Spacer, ButtonGroup, Link } from '@chakra-ui/react';
        import { DeleteIcon, EditIcon, ExternalLinkIcon } from '@chakra-ui/icons'
        import { toast } from 'react-toastify'
        import ReactMarkdown from 'react-markdown'
        import remarkGfm from 'remark-gfm'
        const AllPosts = ({ posts }) => {
          const deleteData = async (id) => {
            const { status } = await fetch('/api/delete', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({ id }),
            })
            if (status === 200) {
              toast.success("post deleted successfully", {
                theme: "dark",
                autoClose: 5000
              })
            }
            window?.location.reload()
          }
          return (
            
    { posts && posts.map((post, index) => { return (
    Tags: {post.tags.length > 0 && post.tags.map((tag, index) => { return ( {(index ? ',' : '') + ' ' + tag} ) })} deleteData(post.id)} mt={1} /> {post.title} {post.body}
    ) }) }
    ) } export default AllPosts
    Enter fullscreen mode Exit fullscreen mode

    CreateModal.js

        import { useState } from 'react'
        import {
            useDisclosure,
            Modal,
            ModalOverlay,
            ModalContent,
            ModalHeader,
            ModalBody,
            ModalCloseButton,
            Button,
            Textarea,
            Input,
            FormControl,
            FormLabel,
        } from '@chakra-ui/react'
        import { toast } from 'react-toastify'
        import generateSocialImage from './GenerateImg'
    
        const PostForm = () => {
            const [title, setTitle] = useState("");
            const [body, setBody] = useState("");
            const [tags, setTags] = useState("");
            //Convert string tags to array
            const newTags = tags;
    
            const handleSubmit = async () => {
                if (title == '' || body == '' || tags == '') {
                    toast.warn("post cannot be empty", {
                        theme: "dark",
                        autoClose: 8000
                    })
                } else {
                    const tagArr = newTags.split(/[, ]+/);
                    let tags_new;
                    if (tagArr.length >= 4) {
                        tags_new = tagArr.slice(0, 4)
                    } else tags_new = tagArr;
                    console.log(tags_new);
                    //Generate social card
                    const socialImage = generateSocialImage({
                        title: title,
                        tagline: tags_new.map(tag => `#${tag}`).join(' '),
                        cloudName: 'dqwrnan7f',
                        imagePublicID: 'dex/example-black_iifqhm',
                    });
                    console.log(socialImage);
                    //Make add create request
                    let posts = {
                        title: title,
                        body: body,
                        image: socialImage,
                        tags: tags_new,
                    }
                    const response = await fetch('/api/create', {
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify(posts)
                    })
                    if (response.ok) {
                        toast.success("post created successfully", {
                            theme: "dark",
                            autoClose: 8000
                        })
                        window?.location.reload()
                    }
                }
            }
            return (
                <>
                    
                        Post Title
                         { setTitle(e.target.value) }} required />
                    
                    
                        Post Tags
                         { setTags(e.target.value) }} required />
                    
                    
                        Post Body
                         { setBody(e.target.value) }} required />
                    
                     handleSubmit()}>Submit
                >
            )
        }
    
        const CreatePost = () => {
            const { isOpen, onOpen, onClose } = useDisclosure()
            return (
                <>
                    Create Post
                    
                        
                        
                            Modal Title
                            
                            
                                
                            
                        
                    
                >
            )
        }
        export default CreatePost
    
    Enter fullscreen mode Exit fullscreen mode

    We used our generateSocialImage Cloudinary function inside the createModal component and update page to generate a social card. Here is an isolated version:

        //Generate social card
        const socialImage = generateSocialImage({
          title: title,
          tagline: tags_new.map(tag => `#${tag}`).join(' '),
          cloudName: 'dqwrnan7f',
          imagePublicID: 'dex/example-black_iifqhm',
        });
        console.log(socialImage);
    
    Enter fullscreen mode Exit fullscreen mode

    We can see how we passed dynamic data to the function, our public image id, cloudname, title from our blog, and taglines from our blogpost too. Our social card will look like this when the function is executed:

    Our transformed social card - Amazing!

    If you followed up till this point, our application is almost ready! Finally, we will go ahead and add some CSS styles to the default stylesheet file in our project globals.css:

        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
            Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        }
        a {
          color: inherit;
          text-decoration: none;
        }
        * {
          box-sizing: border-box;
        }
        @media (prefers-color-scheme: dark) {
          html {
            color-scheme: dark;
          }
          body {
            color: white;
            background: black;
          }
        }
        .main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .footer img {
          margin-left: 0.5rem;
        }
        .footer a {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .grid {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          max-width: 80%;
          margin-top: 3rem;
          margin: auto;
        }
        .card:hover,
        .card:focus,
        .card:active {
          color: #0070f3;
          border-color: #0070f3;
        }
        @media (max-width: 600px) {
          .grid {
            max-width: 100%;
            flex-direction: column;
          }
        }
    
    Enter fullscreen mode Exit fullscreen mode

    We will then run our application using any of these commands to see the finished product.

       # NPM
        npm run dev
    
        # Yarn
        yarn run dev
    
    Enter fullscreen mode Exit fullscreen mode

    Now we have our blog running on Xata and Cloudinary serverless provisions. We can go ahead and improve the user interface, make it more responsive and even add some animations too. We can also host it on services like Netlify, Vercel, and any other client-side hosting platforms we can think of. For this article, we will be deploying to Netlify.

    One easy way to deploy to Netlify is to push our code to Github, connect our Github to Netlify and select the repository that contains our project. We will select the Next.js preset build command and everything will run and deploy automatically with fewer or no configurations. Check this article for more insight on deploying to Netlify.

    Our live link on Netlify is ready.

    Conclusion

    So we were able to learn from this article how we can use Jamstack through Next.js, Cloudinary, Xata, and Chakra UI to build a blog application with CRUD functions without setting up any server. Feel free to comment on what you learned, what we did not cover, possible improvements, and also any questions you might have. I will be glad to take your feedback and answer your questions.

    Resources

    Here are some resources that might be helpful:

  • react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: React Native Top UI Components Libraries | dev.to | 2022-07-28

    Github Documentation Stars ⭐ +22.6k

  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

  • react-navigation

    Routing and navigation for your React Native apps

    Project mention: React Navigation Rant | reddit.com/r/reactnative | 2022-11-19

    Check out the docs and take a look at how they used this API to implement their default bottom tab navigator.

  • NativeBase

    Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

    Project mention: Any good UI libraries? | reddit.com/r/reactnative | 2022-11-21

    There are lots of them but i would prefer - https://nativebase.io/ Its popular and has wide range of support too !

  • RxDB

    A fast, offline-first, reactive database for JavaScript Applications

    Project mention: Sveltekit SPA Mode: Prevent serverside code | reddit.com/r/sveltejs | 2022-11-14

    I am using rxdb which internally uses some folder imports like import x from './folder' as opposed to import x from './folder/index.js which is big nono inside node.js environments.

  • ignite

    Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!

    Project mention: Converting React Native iOS App to React Web App in 5 weeks | reddit.com/r/react | 2022-10-16

    To preface, I have a basic knowledge of Javascript, HTML, CSS, and web dev from building Slackbots, web scraping, and some small hobby projects. I'm basically on a project where the team has an existing codebase built in React Native using the Ignite tech stack. They want to build a web version of this, which I offered to do with no knowledge of React. I thought about using react-native-web, but I'm guessing building it out in React might be better since it's a web-targeted technology?

  • feathers

    The API and real-time application framework

    Project mention: What back end technology to use for a multiplayer game as an experienced front end web developer? Overwhelmed by all the new web dev technology options. | reddit.com/r/webdev | 2022-11-16

    FeathersJS works pretty well for realtime usecases: https://feathersjs.com/

  • create-react-native-app

    Create React Native apps that run on iOS, Android, and web

    Project mention: Using generators to improve developer productivity | dev.to | 2022-05-28

    create-react-native-app

  • react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

    Project mention: Just launched my first app - ShopCats (shopcats.app). Getting react-navigation right was a very interesting challenge, details below. | reddit.com/r/reactnative | 2022-07-05

    What's great about is that you can design your loading screens on their site: https://skeletonreact.com/

  • react-native-gifted-chat

    💬 The most complete chat UI for React Native

    Project mention: Gifted chat not displaying messages correctly | reddit.com/r/learnprogramming | 2022-08-30
  • react-native-paper

    Material Design for React Native (Android & iOS)

    Project mention: Coming to React Native new - where do you get your news? | reddit.com/r/reactnative | 2022-09-21

    Every time when I start to learn something new I usually have a look at popular open source project. So I can understand some good patterns etc. E.g. https://github.com/callstack/react-native-paper

  • react-native-ui-kitten

    :boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

    Project mention: Form Validation in React (Native) using Formik | dev.to | 2022-10-09

    UI Kitten: UI Kitten is a React Native framework for creating stunning cross-platform mobile applications. It is based on Eva Design System and provides a set of general purpose UI components styled in a similar way.

  • boardgame.io

    State Management and Multiplayer Networking for Turn-Based Games

    Project mention: I feel like I'm missing something very simple | reddit.com/r/boardgameio | 2022-10-07

    I've read on some other websites that I should implement the movement logic on the frontend and then just pass the final move to boardgame.io but I feel like that defeats the purpose of the engine.

  • svgr

    Transform SVGs into React components 🦁

    Project mention: Создаем React-компоненты иконок с помощью Figma API и SVGR. Часть 2. | dev.to | 2022-11-16

    const { types } = require('@babel/core'); module.exports = { ... template: function svgrCustomTemplate( { imports, interfaces, componentName, props, jsx, exports }, { tpl } ) { // меняем корневой элемент на SvgIcon jsx.openingElement.name.name = 'SvgIcon'; jsx.closingElement.name.name = 'SvgIcon'; // https://github.com/gregberge/svgr/issues/530 // при изменении корневого элемента пропадает спред пропсов // поэтому необходимо добавить спред пропсов самостоятельно jsx.openingElement.attributes.push( types.jSXSpreadAttribute(types.identifier('props')) ); return tpl` ${imports}; import { SvgIcon } from '../SvgIcon'; ${interfaces}; const ${componentName} = (${props}) => ( ${jsx} ); ${exports}; ` } }

  • amplify-js

    A declarative JavaScript library for application development using cloud services.

    Project mention: Monthly Amazon Location Service Updates - 2022.10 | dev.to | 2022-11-03

    Amplify Geo - Add PlaceId support for Geo Autocomplete feature PlaceID is now available in the autocomplete function.

  • formily

    📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3

    Project mention: Nativescript & Formily: A match made in heaven. | dev.to | 2022-10-21

    Enter Formily, by Alibaba which does exactly the above. With a JSON schema, forms can be generated whilst keeping control of the data model.

  • devhub

    TweetDeck for GitHub - Filter Issues, Activities & Notifications - Web, Mobile & Desktop with 99% code sharing between them (by devhubapp)

  • rematch

    The Redux Framework

    Project mention: Which state management to use? | reddit.com/r/nextjs | 2022-06-06

    Rematch is a nice wrapper on redux. I’d also recommend recoil, not sure if they’re stable yet but I’ve used it in production without any issues. Depends on the complexity of your app, may be overkill using these libraries.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-11-26.

TypeScript React Native related posts

Index

What are some of the best open-source React Native projects in TypeScript? This list will help you:

Project Stars
1 storybook 75,213
2 Joplin 33,041
3 taro 31,947
4 react-hook-form 31,878
5 TypeORM 29,799
6 SWR 24,675
7 react-native-elements 23,036
8 react-navigation 21,861
9 NativeBase 18,641
10 RxDB 18,457
11 ignite 14,504
12 feathers 14,200
13 create-react-native-app 13,047
14 react-content-loader 12,608
15 react-native-gifted-chat 12,035
16 react-native-paper 10,009
17 react-native-ui-kitten 9,378
18 boardgame.io 9,326
19 svgr 9,208
20 amplify-js 9,003
21 formily 8,823
22 devhub 8,565
23 rematch 8,272
Build time-series-based applications quickly and at scale.
InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.
www.influxdata.com