Great catch, I hadn't noticed that. After inspecting it more, I do believe it is applying the border, although since the background behind the tab bar is not transparent, it is cutting off the UI as soon as it gets as low as the tab bar. I found a workaround! Try replacing the tabBar style in App.js with the following: backgroundColor: 'white', position: 'absolute', left: 0, bottom: 0, height: 80, borderTopLeftRadius: 20, borderTopRightRadius: 20, Let me know if that works 😁
That's a great question and honestly something I'm looking to learn next. Do you have any suggestions for frameworks or methods to create responsive UIs?
It would be good to have how to reuse styles that were created in figma in React Native. Its totally redundant way of design the app again in React Native. It would be cool Matt explained how figma code converted into react native UI code and styles. So that we don't need to create again by just seeing the screens of figma. Some plugins like Anima will help us directly import styles and design into React Native apps. Except that This demo videos are good one.
Hi Matt, It was very nice this video, But could you introduction that how to fetch data from remote server and implement these functions. Very appreciate
Generally, if you're using flexbox to space things out, your UI will be responsive. Where it gets tricky is when you're building an app for both a phone and tablet. In situations like those, you'll need to display various sizes for your content depending on the size of the device. For the case of this video, this app is intended only for phones, so displaying different sizes depending on the size of the device is not required
Did you ever do a video on your setup? Multiple Copy Paste? How it indents etc. Would love to understand your shortcuts.
Hi, thanks for the video, but I have a query, how to fix the upper right curve of the tabs? When I scroll I see a white background, see minute 38:00
Great catch, I hadn't noticed that. After inspecting it more, I do believe it is applying the border, although since the background behind the tab bar is not transparent, it is cutting off the UI as soon as it gets as low as the tab bar. I found a workaround! Try replacing the tabBar style in App.js with the following:
backgroundColor: 'white',
position: 'absolute',
left: 0,
bottom: 0,
height: 80,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
Let me know if that works 😁
@@MadeWithMatt Thanks for the help! 👏✌
If all values are static from figma, what would it look like on other phone screen sizes?
That's a great question and honestly something I'm looking to learn next. Do you have any suggestions for frameworks or methods to create responsive UIs?
It would be good to have how to reuse styles that were created in figma in React Native. Its totally redundant way of design the app again in React Native. It would be cool Matt explained how
figma code converted into react native UI code and styles. So that we don't need to create again by just seeing the screens of figma. Some plugins like Anima will help us directly import styles and design into React Native apps. Except that This demo videos are good one.
I agree with you! It would be nice to have a Figma to React Native converter!
hi. for some reason, the big image doesn't display when using on an android emulator
Amazing
Thanks man really appreciate it 😄
@@MadeWithMatt I am grateful to you. greetings from Turkey
Hi Matt, It was very nice this video, But could you introduction that how to fetch data from remote server and implement these functions.
Very appreciate
That's a great idea, I'll have a video up soon about fetching data from a server 😁
@@MadeWithMatt woooow，great，many thanks
Will this be responsive??? Let me know if I need a responsive UI in react native.
Generally, if you're using flexbox to space things out, your UI will be responsive. Where it gets tricky is when you're building an app for both a phone and tablet. In situations like those, you'll need to display various sizes for your content depending on the size of the device. For the case of this video, this app is intended only for phones, so displaying different sizes depending on the size of the device is not required