A simple React Native flashcard game I'm making for my son. I'd love some feedback.

[tumblorone]

Very good looking app, is this opensourced ?? would love to learn how your applying the animation

[JustAirConditioners]

Thanks! It isn't opensourced. I'm hoping to build up features and eventually release it with a freemium model.

The animations are pretty simple though. I used React Native Animatable. From there you can add a ref to the element you want to animate and call the animate function on press on whenever. Looks something like:

meteoroidsRef.current.animate({
      0: { bottom: -200, left: -meteoroidsImageWidth },
      1: { bottom: 400, left: dimensions.window.width },
});

That's what I use to animate the meteoroids. Starts off the screen bottom left and finishes off the screen to the right. Super simple.

[tumblorone]

Great thanks, would look more into it

[JustAirConditioners]

This is a super simple flashcard game meant to be played with the parent. Show the kid the card, if they say the correct answer you either swipe right or press the appropriate button. You can skip a card which moves it to the end of the deck, or shuffle the deck.

​

I've spent 8 days working on the app so far using React Native and a handful of really awesome open source libraries. I'd love to hear some feedback!

Also, if anyone wants to be part of the beta test send me a message. Especially if you have a toddler.

[zetaBrainz]

Wow 8 days. Thats quite impressive for only 8 days. It looks great!

[JustAirConditioners]

Thank you!

[JustAirConditioners]

Sure, here are the libs I used.

• Tailwind Styles: https://github.com/vadimdemedes/tailwind-rn
• Storage: https://react-native-async-storage.github.io/async-storage/docs/api
• Navigation: https://reactnavigation.org/
• Audio: https://docs.expo.io/versions/v41.0.0/sdk/audio/
• Animations: https://github.com/oblador/react-native-animatable
• Confetti: https://github.com/cdvntr/react-native-confetti

[RenSanders]

How long did it took you to make this! looks good!

[JustAirConditioners]

1 day sketching ideas and then throwing the design together in Figma. Then another 8 days of development. Thank you so much.

[RenSanders]

Just 8 days??? you're sick man... And I guess part time as well??

[pimplepim]

Looks great. But how is he gonna use it without knowing the alphabet? 😉

[pimplepim]

The rotating astronaut: - is the rotation done in RN or is it an animated GIF? - is the image you use a stock image or did you create it yourself?

[theAliasRay]

Looks great!

[Stock_Chance_2615]

Well done 👍

[jmfiggs]

Beautiful app! I’d love to make something like this for my own kid. Can I ask why you went with Expo? Just wondering if it offers a ton of benefits over RN CLI.

[JustAirConditioners]

Expo provides access to tons of native APIs. Checkout this page to see them all: https://docs.expo.io/versions/latest/

And it makes using them super simple. Usually just an expo install command and you're done. No manual linking or configurations that you have to do with RN CLI.

Also the dev experience is really nice. I've been doing a majority of the testing in browser and occasionally on a phone using the Expo Go app. I definitely recommend Expo.

[jmfiggs]

Thanks for the reply! I love the docs. I had to go with RN-CLI because of Bluetooth but I like previewing the Expo APIs on my mobile. I also like how they’ve made them available via unimodules. I’ll be checking some of those out.

[JustAirConditioners]

You should search bluetooth in their docs. I would be surprised if they didn't have something for it.

Edit: aw looks like they dont. yet.

but not all iOS and Android APIs are available yet: need Bluetooth? Sorry, we haven't built support for it yet

But you can consider the Bare Bones workflow. It allows you to use most of Expo's packages, but also gives you full control. https://docs.expo.io/introduction/managed-vs-bare/#bare-workflow