/r/reactnative

Photograph via snooOG

A community for learning and developing native mobile applications using React Native by Facebook.

About:

A community for learning and developing native mobile applications using React Native by Facebook.

Interested in building web apps using React.js? Check out /r/reactjs!


React Native Links:

Getting Started w/React Native

IRC Chatroom:

irc.freenode.net #reactnative

Related Subreddits


Keywords: ios, android, mobile, apps, apple, iphone, ipad

/r/reactnative

137,094 Subscribers

0

I built a micro-podcasting app in React Native

I built this app (https://akashq.com) within a few weeks, thanks to React Native. If you want to try it out, here is the invitation code: BVN55L

0 Comments
2024/10/29
23:03 UTC

175

I built Apple Music on React Native

UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler.

Features 🎵 Full-screen music player modal with gesture controls 🔄 Smooth scaling animations of the root content 👆 Interactive pan gesture handling 📱 iOS-style sheet presentation 🎨 Dynamic border radius animations

Also supports drag horizontal to close, scrollview + pan gestures depending on position of scroll and more.

Still needs few fixes but below in comments is the GitHub repo, feel free to contribute.

22 Comments
2024/10/29
19:31 UTC

1

Difference between dropped frames and stutters?

0 Comments
2024/10/29
19:16 UTC

1

Refresh Control on ScrollView

Can someone tell me if I'm missing something with Refresh control? The function works perfectly fine, but I thought it was only supposed to activate when the ScrollView Y axis was 0?

Whenever I try to scroll up to the top of the page on any point of the y axis it will trigger the refresh. only then will I be able to scroll up whilst the refresh animation is mid process.

  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);




    <SafeAreaProvider>
    <ScrollView contentContainerStyle={styles.scrollView}
    refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>

    </ScrollView>
<Text>Pull down to see RefreshControl indicator</Text>
</SafeAreaProvider>

Thanks

1 Comment
2024/10/29
19:01 UTC

4

Easier to find job as React Native mobile dev or Frontend Web React Dev?

As a junior dev in this market which is easier to get a job?

View Poll

2 Comments
2024/10/29
18:16 UTC

1

How reasonable is it to use an iP-to-location service to calculate a user's location vs just requesting geolocation permission / data?

Good morning, I am building a finance-related app and certain functionality should only be usable to users in specific jurisdictions (ie countries / states). I would prefer not having to request one more permission (Geolocation) and we don't need exact coordinates like Geolocation permissions / tracking give. How viable is it to just use a backend service that maps IP addresses to general location (ie country / state)? So the device would send an HTTP request to our server which would return a value (probably country code) and the device would should / hide functionality based on that value.

Does this sound like a good solution? Is it considered unethical to try to figure out a user's location from IP address without alerting them or requesting some sort of permission?

5 Comments
2024/10/29
17:12 UTC

0

Expo vs React Native documentation?

I want to know which is better for a beginner to read to learn react native, expo documentation or react native documentation? which has easier/better tutorials?

4 Comments
2024/10/29
16:55 UTC

0

React Native

starting a new journey in react native mobile app development hope I'll finish it

0 Comments
2024/10/29
16:48 UTC

1

Multiple environments set up with Expo

Hello. In a previous post, there was a question about how to handle multiple different environments in React Native. I responded to that post where I generally described on how to handle multiple environments in Expo, but without EAS. Since a few people showed interest in my response, I decided to make a separate post and share the example repo where you can see how to exactly achieve that. Here's the link to the repo. The repo also describes how to release your app using Fastlane and Firebase App distribution.

I hope that this will be helpful to at least some of you.

Let me know what you think about it and if you have any feedback on what could be improved.

3 Comments
2024/10/29
15:59 UTC

0

PUSH NOTIFICATIONS

Hi i am currently using a windows machine and have a assignment to do where I have to implement Push Notifications but I am really confused as I do not have much knowledge about backend and can only use android simulator maximum resources are for ios is there any resource anyone can share it would be much of help

11 Comments
2024/10/29
15:35 UTC

1

Database recommendations

I am a beginner to mobile app development, planning to build a thrift store kinda app(like Karrot) in which users can search for what they need and find who has it. if yes, users can chat and make the deal.

App will be saving user's basic details like name, email, location and what they want to buy or sell.

I am thinking of Firebase, but can't choose between Cloud firestore or realtime database which do you think is more suitable for this app? more suggestions are welcome too.

7 Comments
2024/10/29
14:36 UTC

0

EXPO APK NOT WORKING PROPERLY (URGENT)

0 Comments
2024/10/29
12:34 UTC

0

Model training

What model should you use to train a face skin disease detection (acne and eczema) app ?

1 Comment
2024/10/29
11:30 UTC

11

Blur application when opening bottom sheet

Hello.

I'm using https://github.com/gorhom/react-native-bottom-sheet and I'm trying to apply this effect but I can't get it. I have used expo blur, etc... but there is no way.

https://preview.redd.it/n3ceu7bijnxd1.png?width=570&format=png&auto=webp&s=b87c5297c8146f81b7cc8496b87eb7b6071cd979

Any idea?

5 Comments
2024/10/29
07:59 UTC

2

React Native Windows explore

Ohkay, so starting out I am a React Web developer and that's my primary experience with the react ecosystem. It's been a month or so I tried out react native for mobile on android (couldn't try out ios builds because I don't own any apple products). I loved that you can build productivity or simple CRUD or pretty much any kind of app with smooth UI and small app packages for specific architectures ( most apps use 1Gig storage anyways nowadays ).

My question is, Is it worth exploring React Native Windows + Mac Os?

Are there any companies other than MS working on projects powered by React Native Windows + MacOs?

I heard MS Edge was built on top of React (not sure the how), is it still the case?

The getting started guide on their official page seems a bit complicated to me, is there anyone here who have experienced this project flow?

With the new architecture in place as default, hows the support for native/win Api proxies via C++ native modules?

Seems like they haven't gone the Chromium embedding route for view layer, how does the styling and rendering work in React Native Windows + MacOs ? Is it web compliant?

1 Comment
2024/10/29
07:55 UTC

0

Getting blur image

I am downloading the image first using rnfs and saving the image in the cache directory, then I am displaying the image in the ImageZoom component and get a blur image when zooming, although image is of hight quality . Please help

0 Comments
2024/10/29
07:40 UTC

1

Picker Test Help!!!

How can i solve my picker jest test, it says unable to find an element with text, <View>

<RNCPicker /> </View>

and the test cannot go through it.

And this is the sample coding:

im stuck for too long

export interface Role {
  ID: number;
  Name: string;
  Desc: string;
}
const ManageRolesScreen = () => {
  const [role, setRole] = useState<Role[]>([]);
  const [createRole, setCreateRole] = useState<Role>({
    ID: 0,
    Name: '',
    Desc: '',
  });
  const [selectedRole, setSelectedRole] = useState<number>(0);
  useEffect(() => {
    const fetchRoles = async => {
      try{const response = await axios.get<Role>(url);
          setRole(response.data);}
      catch(err){console.err;}
    }fetchRoles();
  }, [];
}


jest.mock('axios');
const mockAxios = axios as jest.Mocked<typeof axios>;

describe('Manage Role Screen', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('Should appear all role in role picker', async () => {
    //Mock API response to get role data
    mockAxios.get.mockResolvedValueOnce({
      data: [
        {ID: 0, Name: 'admin', Desc: 'Admin Role'},
        {ID: 1, Name: 'user', eDesc: 'User Role'},
      ],
    });

    const {getByText, findByText} = render(<ManageRolesScreen />);

    await waitFor(() => {
      expect(getByText('Select a role')).toBeTruthy();
    });
    expect(await findByText('admin')).toBeTruthy();
    expect(await findByText('user')).toBeTruthy();
  });


 <Picker
          selectedValue={selectedRole}
          onValueChange={itemValue => setSelectedRole(itemValue as number)}
          style={styles.picker}>
          <Picker.Item label="Role" value="" />
          {role.map(roles => (
            <Picker.Item
              key={roles.ID.toString()}
              label={roles.RoleName}
              value={roles.ID}
            />
          ))}
        </Picker>
2 Comments
2024/10/29
03:31 UTC

0

Has anyone successfully gotten stripe to work with fire base and react native expo?

I’m having a lot of trouble getting this to work any insight would be appreciated 🙏 trying to get stripe connect to work

0 Comments
2024/10/29
00:54 UTC

4

Anyone out there want a skill trade? Musician/guitarist/recordingEngineer looking for some audio help in react native with Expo AV.

I'm having some real issues with React Native Expo audio and think i need to get some proper teaching from someone because something fundamental seems to be going wrong and i can't find any info online about it. In return i can offer music and production lessons or consultation. I've got a degree in Jazz Guitar, learnt piano since I was 6, studied composition+record engineering and produce in logic/ableton( but am at least a little familiar with most DAWs). Long shot I know but if anyone happens to be on the lookout for some of that stuff and can trade in react native knowledge I would really appreciate it! Thanks in advance all

4 Comments
2024/10/28
22:26 UTC

2

PDF Viewer inside a scroll view?

Hello everyone!

Thank you in advance for any help.

I’m aware there are some libraries to help you view PDFs inside of a native app, but can you use those libraries in a scroll view instead of full screen?

For example, imagine I have the top half of the screen occupied by a PDF that you can scroll down on (kind of like how it works when you view them horizontally on your device), and the second half of the screen I have other content (quizzes, commentary, etc )

Is this achievable? Is there a library that suits itself to this use case?

Thank you!

0 Comments
2024/10/28
20:10 UTC

15

Dev, staging and prod apps

How is everyone handling differents env releases?

Let’s say I need to get a staging version to QA. Can TestFlight handle differents envs?

Thanks

27 Comments
2024/10/28
20:06 UTC

1

Embedded ReactJS Component into React Native WebView component

Hi Everyone ,

I would like to ask about how to embedded ReactJS web component into React Native WebView component
for example ,

I have code of ReactJS web page (not hosted only as local source code) that includes packages such as material UI and other packages , also apis , so I want to display this page into my React Native App . how can I implement that? also is the WebView component has the ability to make communication between ReactJS components and React Native component ?

2 Comments
2024/10/28
19:58 UTC

1

React Native "Item Label" in Android

Hello everyone,

I'm currently working with a modal in a React Native Expo project and have implemented the following setup for currency selection:

<Modal
        accessible={true}
        accessibilityLabel="Currency Selection"
        accessibilityViewIsModal={true}
        statusBarTranslucent
        isVisible={isVisible}
        onBackdropPress={onClose}
        style={styles.modal}
      >

        <SafeAreaView
          accessible={true}
          accessibilityLabel="Currency Selection Safeview"
          className={`${themeMode === 'dark' ? 'bg-[#171717]' : 'bg-white'}`} style={styles.modalContent}>

          <Text
            accessible={true}
            accessibilityLabel="Currency Selection Title"
            className={`text-sm ${themeMode === 'dark' ? 'text-[#f6f8fa]' : 'text-black'} mt-20 text-xl font-bold text-center`}
          >
            Currency Selection
          </Text>
        </SafeAreaView>

However, the Accessibility Scanner is showing an error labeled "Item Label." Has anyone else encountered this issue, or might have insights on how to address it?

https://preview.redd.it/24o0sehuujxd1.jpg?width=1080&format=pjpg&auto=webp&s=6a88027792f6393a949ec735bcf8c72573b80da2

Thank you in advance for any suggestions!

0 Comments
2024/10/28
19:36 UTC

12

What is the best React native course now october 2024?

i am looking for a good react native course?

19 Comments
2024/10/28
18:20 UTC

0

#BuiltWithTamagui This AI beauty tool called Quickglow lets you get product recommendations from a selfie and to chat with an assistant that will answer all your questions.

Quickglow is a tool built using the Tamagui design system that lets people get lip product recommendations such as lipstick by simply uploading a picture of selfie and get matched based on their skin tone.

The dashboard has two main features: image and chat. The image feature saves your recommendations and lets you scroll through them. The chat feature is a question/answer that's inspired by Claude and ChatGPT.

There is a credits system now where you can buy different amounts of credits weekly. The credits renew automatically for you once you are subscribed to the service.

Just thought this was super interesting as it. What do you think of this product?

https://quickglow.ai

Quickglow - AI Beauty Tool

1 Comment
2024/10/28
18:08 UTC

0

Seeking Recommendations: Best MacBook for Web and Mobile Development on a Budget

Hello, fellow developers!

I’m a web and mobile developer using Expo for mobile development, currently working on Linux. Recently, I’ve been experiencing issues with my laptop that have started to impact my productivity. Given these challenges, I’m considering switching to a MacBook for a more stable workflow.

For those with experience using MacBooks in a similar setup, I’d love to hear your insights. Specifically, which MacBook models would you recommend for development on a budget? I’m looking for a balance of performance and value that would suit my work needs.

Also, if you’ve made the switch yourself, how has it impacted your productivity?

8 Comments
2024/10/28
17:39 UTC

4

Help! reducing React Native app size for a relatively simple app

I’ve got a relatively simple React Native app, but its size feels way too big for what it does. I’m using around 4–5 RN libraries, but they seem to add up fast.

Anyone have tips to drastically reduce app size? Looking for advice on optimizing libraries, assets, or any tools to help track down what's eating up space.

5 Comments
2024/10/28
17:22 UTC

1

How to create a Material You-style header in React Native?

This type of header is called a Top App Bar in the Material You design system. I'd like to implement it without using any design libraries, such as React Native Paper.

https://m3.material.io/components/top-app-bar/specs

https://reddit.com/link/1ge7iya/video/q6z1z5gi5jxd1/player

0 Comments
2024/10/28
17:14 UTC

Back To Top