शैडोइंग अभ्यास: 10 Essential React Native Tips Every Developer Must Know - वीडियो के साथ अंग्रेजी बोलना सीखें

अभ्यास मोड चुनें

हर मोड पूरी स्क्रीन का अभ्यास कक्ष खोलता है।

184 वाक्य

यदि वाक्य बहुत छोटे या लंबे हों, तो समायोजित करने के लिए Edit पर क्लिक करें।

You might have worked with React Native for quite some time, but do you really know all the ins and outs?

There are some really small nuggets of wisdom in the React Native docs

or from the day -to -day use that I want to share with you,

so here are 10 practical tips that you can use in your next

React Native project.

The first one is a real quick one about lists and something I shared before.

If you have an input here and you want to hide that keyboard, there's a simple thing that you can add to your list.

So I'm using a flat list here and you can now simply go ahead

and add the keyboard dismiss mode and set it to on drag.

As a result, I can drag the list and it will automatically close the hardware keyboard whenever I do the drag.

Additionally, by the way, you can also quickly make this a really cool animated list.

So I can add and remove things.

But let's just change this to an animated flat list from React Native Reanimated.

And then let's add the item layout animation and let's import the linear transition.

So now I should be able to have a smooth transition whenever I remove items

or add items with just two little changes to an animated flatlist

and the item layout animation and I can also on swipe close my keyboard.

The second tip is about the pressable component.

In most of my tutorials you're gonna see me use the touchable opacity which works great as a button replacement.

However if you are looking for a more extensive

and future -proof way to handle touch base input check out the pressable API

and if you go into the pressable you see

that there's a lot more fine -tuning

you can do like on press in on press out where

you can change the state of your components let's do a quick example i will just change these items

which are currently touchable opacity uh item to oppressable

and instead of just using styles item i can actually now use a function where i use the pressed state

and use that to set either the opacity

or for example the background color

and you can even use

this press state inside the child values here where I currently have the text of the pressable component.

As a result, I can now fine -tune exactly how the click event on

that button and how especially the press event works instead of just using a touchable opacity.

Tip number three is about dark modes and the appearance of our application.

Did you know that you can simply wrap your application using the theme provider from React Navigation

and then include the default theme

and the dark theme to automatically style the elements from react navigation

so in this case you're gonna see

that both the status bar uh the top area up here

and even the background here

because it's using the default background color are changing once i switch the colors here in the simulator this works

because we use the use color theme use color theme hook from react native

which then updates the color theme to either light or dark

and this is applied here in our check wrapped around our application.

You can then also drill this down on component level.

So whenever you want, you can simply import the color theme

and use it as a state to set different styles on your elements.

And if you manually want to toggle this, you can use the appearance API and the set color theme to manually save this.

This works nice in combination with something like async storage or MMKV.

So you can then manually on click toggle this.

However, in the simulator, this usually fails especially when I don't hit save

so now it should work and I can instantly and easily switch between light and dark mode in my app.

Tip number four is once again about colors this time it's about using platform

and the platform color API in the application

so here's a view with three different buttons and

if I go to

that same view on my Android emulator you're gonna see for some reason they look different

and the reason is

that you can use both platform select to switch between different platforms

you can actually not only have oh come on please stay open come on stay open

you can not only ah this is not possible not only switch between ios

and android but also windows mac os web or native

and then you can supply specific colors in your style sheet

and you can not only have fixed colors

but you can also see the platform color here

this is a bit more complicated to use especially figuring out the values for Android is somewhat hard

you have to get into the Android documentation but

if you're interested in this you can actually use the system colors of both iOS

and Android if you want a complete

and even more native feeling in your application tip 5 is about fonts

and especially Google fonts did you know that there's an expo package

that you can use that you can simply install

and then use all the fonts of google let's check

it out i've added the package for the frank rule libra uh font to my application to the layout

and i also use the use fonts hook to safely in

the beginning of my application load all the custom fonts

that i want to use i would usually use and use effect

and make sure fonts loaded is ready

but nonetheless i can now use them on my page inside of the font family

and as a result we see here the bold

and the medium one being applied

it has never been easier to use google fonts in your

react native application than this trust me tip number six is about images

when you use the image component

and you're loading something over the network for example a really big image like this it can sometimes take time

so if i go here it takes a millisecond

and there are sometimes images

that are even bigger now what you can do is you can actually specify a default source

and within that default source you basically set the image

that should be deployed a deployed should be displayed

while the first image is loading so

if I had it like this now I could go into the component

and you quickly saw that react native image

so I just used my local image because

that one should be instantly available you could also have like a simple loader in there as the default source

that would work as well and then you can use any kind of big image

and while it's loading just by default you display your default source in the image element.

Tip number seven is about the text element.

If you have a very long text in your application, there are different ways to improve this.

100

So the first way, if you're rendering really long text, is of course have this in a scroll view.

101

But sometimes you also want to limit the number of lines.

102

So you can do number of lines on the text element.

103

Let's set this to five.

104

And this will automatically render only five lines.

105

And at the end, you're going to have three dots.

106

So you don't need any logic if text length is bigger than 120, then render three dots or something.

107

No, you can just set the number of lines.

108

However, if you at the same time also want to still show all the things of your text, because now the text of girls truncated,

109

you could add a property called adjust font size to fit.

110

As a result, this looks quite interesting because in our example, well, eight lines is probably not enough.

111

But now we would be able to actually fit all of this in 20 lines of text

112

Remember this was our initial state

113

and now we would be able to render all of that using adjust font size to fit which will simply

114

Specify whether fun should be scaled down automatically to fit given style constraints

115

This is not always helpful, but it can be a nice fix in some of your applications

116

Tip number eight is about warnings in your application

117

So I recently came across a warning that was well not too interesting to me

118

Let's say you got this one

119

Which of course doesn't come up when I want to show it so encounter two children with the same name

120

Of course, that is something you definitely want to fix

121

However, sometimes there are things that you just want to ignore because they keep appearing

122

Especially if you maybe do a presentation for your customer what you can do is you can simply import lockbox

123

From react native we don't need these fences.

124

That looks interesting and now i could go ahead

125

and use lockbox uh and i got two um

126

or different ways i could ignore all locks

127

or i could ignore specific locks

128

so in my case what i want to ignore is probably encountered uh two children with the same key

129

i can now hit save and let's do a reload again

130

and i go into and boom no more locks

131

and of course the same would work

132

if i would use uh logbox .ignorealllocks that's probably a bit more dangerous uh

133

because it would hide anything that pops up in your application

134

so anyway treat this carefully but if you want some mind space some quiet applications

135

and nothing that pops up

136

while you work on your application simply use logbox to control the logs that appear in your react native app.

137

Tip number nine is about API usage and I was kinda shocked when I saw it.

138

So I was using a local API on localhost port 8080

139

and we see I have a simple block here where I fetch my data from API URL slash test

140

and it worked perfectly fine on iOS.

141

However on Android I get an error fetching data.

142

Why is that the case?

143

Well it turns out that localhost doesn't work on the Android emulator.

144

You gonna have a bad day.

145

What you can do as a result is you can add this little block at the top,

146

which is kinda ugly, but if you put all of your API calls, usually in one or two files,

147

into our custom hooks, that should be easy to treat.

148

So in my case, I grab the environment using the node environment to make sure we're actually running in development.

149

And if we're running in development and the platform is Android, I exchange and patch my API URL, which i usually got from my process environment

150

so instead of using localhost port 8080 i'm now using 10 .0 .2 .2 8080 let's hit save

151

and let's check out my emulator again so

152

if i now go into page 9 voila we have fixed this

153

and we can make api calls to localhost on both ios and android

154

Just as a quick addition to this, because this might be an ugly hack, here's something else that is recommended.

155

So you can also map your port using ADB or down here for ADB devices, you can map the port specifically for your emulator.

156

That's probably a tiny bit better than having additional code.

157

But if you just want to do a quick test, this one will get the job done.

158

Tip number 10 is for all of you who want to build a production application of your React Native application using Expo.

159

So usually you're gonna see you have your own custom defcline even if you do a pre -build

160

It only works when your live reload is up and running

161

But sometimes you just want to have the app installed and leave the room and show it to someone else

162

What you can do to build this kind of standalone application is once

163

you have created your pre -build with Expo Go into Xcode go up here hit edit scheme and under run configuration

164

Here for the build configuration you want to select release

165

Go ahead with that, build the application for your device and there's no more connection to a local server.

166

Additionally you can of course do the same for Android, so open your project up with Android Studio

167

and then at the bottom left you're gonna really small find something called build variants.

168

Inside of build variants you see that everything here is set to debug.

169

And of course for our app I can now change this to release, it would change all of these to release

170

and then I can go up here

171

and deploy the app to either my simulator

172

or of course any kind of connected android device all right

173

that brings us to the end of this quick video

174

I hope you enjoyed this quick run through of 10 different things

175

that I picked up over the years I took note of them

176

I probably will do another video once I reach more than five

177

or ten nodes again in the future

178

but let me know in the comments what is something that you figured out after years of using

179

React Native or you were like, why didn't I know that earlier?

180

ऐप डाउनलोड करें

धाराप्रवाह बोलने के लिए ज़रूरी सब कुछ

AI उच्चारण स्कोरहर वाक्य का स्कोर

IPA अभ्यासहर ध्वनि में महारत

शब्दावलीअपना शब्द भंडार बनाएँ

शब्द गेमखेलते हुए सीखें

QR स्कैन करें

Download on theApp Store Get it onGoogle Play

उसी चैनल से

अनुशंसित वीडियो

558 वाक्य

इस पाठ की शब्दावली और बोलने के सुझाव

यह स्पीकिंग पाठ वीडियो “10 Essential React Native Tips Every Developer Must Know” पर आधारित है। सबसे ज़्यादा दोहराए गए शब्द ये हैं: application, color, react, native, android। इस वीडियो में शैडोइंग के लिए 184 वाक्य और 2332 शब्द हैं। बोला गया हिस्सा 12:00 लंबा है। वक्ता तेज़ बोलता है, लगभग 194 शब्द प्रति मिनट, इसलिए जुड़ी हुई और कमज़ोर ध्वनियाँ ज़्यादा मिलेंगी। 84% शब्द अंग्रेज़ी के 3,000 सबसे आम शब्दों में से हैं; बाकी शब्द अभ्यास से पहले देख लेना अच्छा रहेगा।

इस वीडियो की मुख्य शब्दावली

वीडियो के 15 सीखने लायक शब्द, उच्चारण और अर्थ के साथ:

शब्द	उच्चारण	अर्थ
font संज्ञा	/fɑnt/	फ़ॉन्ट
default संज्ञा	/dɪˈfɔlt/	व्यतिक्रम
element संज्ञा	/ˈɛləmənt/	तत्त्व
ignore क्रिया	/ɪɡˈnɔː/	उपेक्षा, उपेक्षा करना
keyboard संज्ञा	/ˈki.bɔɹd/	कीबोर्ड, कुंजीपटल
custom संज्ञा	/ˈkʌstəm/	प्रथा, रीति
dragon संज्ञा	/ˈdɹæɡən/	अज़दहा, अजदहा
hook संज्ञा	/hʊk/	अंकुश, आंकड़ा
import संज्ञा	/ˈɪm.pɔɹt/	आयात
package संज्ञा	/ˈpæk.ɪd͡ʒ/	पैकेज, पैकेट
select क्रिया	/sɪˈlɛkt/	चुनना, चयन करना
ugly विशेषण	/ˈʌɡli/	असुंदर, कुरूप
tune संज्ञा	/tjuːn/	धुन
encounter क्रिया	/ɪnˈkaʊntɚ/	सामना, भेंट
instantly क्रिया विशेषण	/ˈɪnstəntli/	हाथों हाथ

वीडियो में आने वाली फ़्रेज़ल वर्ब

शब्द	उच्चारण	अर्थ
go ahead क्रिया	/ˌɡoʊ əˈhɛd/	आगे बढ़ना

इस वीडियो का व्याकरण

वक्ता जिन संरचनाओं का सबसे अधिक प्रयोग करता है, वीडियो के असली शब्दों के साथ:

संरचना	वीडियो में
Passive voice be + past participle — ज़ोर इस पर कि क्या होता है, न कि कौन करता है	is applied · being applied · should be deployed
Present perfect have/has + past participle — बीता हुआ काम जिसका असर अभी भी है	have fixed · i've added · has never been

ध्यान देने योग्य उच्चारण

वक्ता 29 बार संक्षिप्त रूपों का प्रयोग करता है, जैसे you're, gonna, don't। इन्हें वैसे ही छोटा बोलें जैसा आप सुनते हैं।

“th” की ध्वनियाँ: smooth /smuːð/, nonetheless /ˌnʌnðəˈlɛs/
“sh” और “zh” की ध्वनियाँ: transition /tɹænˈzɪʃ.ən/, animation /ˌæn.ɪˈmeɪ.ʃən/, navigation /nævɪˈɡeɪʃən/, configuration /kənˌfɪɡ.əˈɹeɪ̯.ʃən/, shock /ʃɔk/
लंबे शब्द — बलाघात सही रखें: manually /ˈmænj(u)əliː/, simulator /ˈsɪmjəˌleɪtɚ/, animation /ˌæn.ɪˈmeɪ.ʃən/, navigation /nævɪˈɡeɪʃən/, configuration /kənˌfɪɡ.əˈɹeɪ̯.ʃən/

हिंदी भाषियों के लिए मुश्किल ध्वनियाँ:

/v/ और /w/ का फ़र्क़ — /v/ में ऊपर के दाँत निचले होंठ को छूते हैं, /w/ में होंठ गोल होते हैं: navigation /nævɪˈɡeɪʃən/, variant /ˈvæɹi.ənt/, server /ˈsɝvɚ/, hardware /ˈhɑɹdˌwɛɹ/, wisdom /ˈwɪzdəm/
/z/ — इसे “ज” (/dʒ/) न बनाएँ: transition /tɹænˈzɪʃ.ən/, presentation /ˌpɹɛzn̩ˈteɪʃn̩/, wisdom /ˈwɪzdəm/
शब्द की शुरुआत में s + व्यंजन — पहले “इ” न जोड़ें: specify /ˈspɛs.əˌfaɪ/, smooth /smuːð/, scroll /skɹoʊl/, swipe /swaɪp/

इस वीडियो से अभ्यास कैसे करें

पहले बिना बोले पूरा वीडियो एक बार सुनें और जो शब्द नहीं आते उन्हें लिख लें।
0.75× गति से शुरू करें, एक-एक वाक्य की शैडोइंग करें, और सहज लगने पर सामान्य गति पर लौटें।
अपनी आवाज़ रिकॉर्ड करें और मूल से तुलना करें, ख़ासकर font, default, element जैसे शब्दों पर ध्यान दें।

शैडोइंग तकनीक क्या है?

शैडोइंग (Shadowing) एक विज्ञान-समर्थित भाषा सीखने की तकनीक है जो मूल रूप से पेशेवर दुभाषिया प्रशिक्षण के लिए विकसित की गई थी। विधि सरल लेकिन शक्तिशाली है: आप मूल अंग्रेज़ी ऑडियो सुनते हैं और तुरंत इसे ज़ोर से दोहराते हैं — जैसे वक्ता की छाया 1-2 सेकंड की देरी से। शोध से पता चलता है कि यह उच्चारण सटीकता, स्वर, लय, जुड़ी हुई ध्वनियाँ, सुनने की समझ और बोलने की प्रवाहशीलता में काफ़ी सुधार करता है।

शैडोइंग तकनीक: पूरी चरण-दर-चरण गाइड पढ़ें →

शैडोइंग अभ्यास: 10 Essential React Native Tips Every Developer Must Know - वीडियो के साथ अंग्रेजी बोलना सीखें

अभ्यास मोड चुनें

ऐप डाउनलोड करें

Tools I use to make MY APPS

React Conf 2025 React Native Keynote

Use these CSS features instead of JavaScript

The future unfolds! How to optimize Android apps for adaptive layouts

GitHub Copilot now controls your command line...

Video

Is React Native Dead? Shopify Is Leaving

How I deploy serverless containers for free

Video

How To Land Your First Junior Dev Role

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Why React Native apps make all the money

Prompt Engineering - Guidelines