React Native: Building Cross-Platform Apps

The Seleda Journey

When I joined Toptech IT Solution, we needed to build a marketplace app that worked on both iOS and Android. With limited resources and time, React Native was the obvious choice.

Why React Native?

Pros We Experienced

Cons We Managed

Key Features Implemented

Multi-Theme Support

Users could switch between light and dark themes:

const ThemeContext = createContext<ThemeContextType>(defaultTheme);

export function ThemeProvider({ children }: { children: ReactNode }) {

const [theme, setTheme] = useState<'light' | 'dark'>('light');

const colors = theme === 'light' ? lightColors : darkColors;

return (

<ThemeContext.Provider value={{ theme, setTheme, colors }}>

{children}

</ThemeContext.Provider>

);

}

SMS Integration

For user verification and notifications:

// Using react-native-sms

import SendSMS from 'react-native-sms';

const sendVerification = async (phone: string, code: string) => {

await SendSMS.send({

body: `Your Seleda verification code is: ${code}`,

recipients: [phone],

});

};

Performance Optimizations

With 8K+ active users, performance was critical:

Results

After 18 months of development:

Architecture Decisions

State Management

We used Redux with Redux Toolkit:

API Layer

Abstracted all API calls:

const api = {

products: {

list: (params) => client.get('/products/', { params }),

detail: (id) => client.get(`/products/${id}/`),

create: (data) => client.post('/products/', data),

},

// ... other resources

};

Lessons for Future Projects

React Native enabled us to ship a quality product with a small team. The trade-offs were worth it.