By: Guillermo Sierra
- ⛓ Routing: React Navigation
For simplicity a map of objects to iterate within
createBottomTabNavigation:
export type Route = {
name: string;
component: React.ComponentType<any>;
iconName: {
focused: string;
unfocused: string;
};
};-
⚙ ️State management: React-query would be the chosen tool but due to limited time, only mock data generated with FakerJS , 🚨however faker.avatar() was not properly working
-
🖌 Styling: Consistencss Based in Tailwind for web, this library helps to ensure consistent UI Guidelines such as
BASE_PIXEL=4to perform all the spacings and sizes in the app. Also I've created some helper functions such aseColor()and sizes such as:
export const imgSize = {
card: [C.h50, C.w46],
big: [C.h13, C.w13],
md: [C.h10, C.w10],
sm: [C.h8, C.w8],
};Time constrains made me skip the part of applying properly a gradient mask to text, however this could be thanks to a SVG Mask as follows:
//Absolute Container
<Svg width = "100%"
height = "100%" >
<Defs>
<LinearGradient id = "Gradient"
x1 = "0"
y1 = "0"
x2 = "1"
y2 = "0" >
<Stop offset = "0"
stopColor = { gradient[0] }
/>
< Stop
offset = "1"
stopColor = { gradient[1] }
/>
< /LinearGradient>
< /Defs>
< Text
id = "Text"
x = "50%"
fill = "url(#Gradient)"
fillRule = "evenodd"
y = {`${0.75 * lineHeight}`
}
fontFamily = { fontFamily }
fontWeight = { fontWeight }
fontSize = { fontSize }
textAnchor = { textAnchor[alignment] } >
{ text }
< /Text>
< /Svg>In order to achieve the following gradient
- 🧪 Unit tests: user creation
test('should create a user with default values', () => {
const fakeObj = {
avatar: 'http://fake-image-url.com',
name: 'John',
};
const user: UserType = createPartialUser(fakeObj);
expect(user.avatar).toBe('http://fake-image-url.com');
expect(user.name).toBe('John');
});
- 🎨 Figma Inspiration: Zeplin See comparison below:
cd ios && pod install
yarn start
yarn pods-m1
react-native run-ios
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent