You may want to install prettier to format code automatically
then setup a commit hook like this to run in each commit/push/etc... https://github.com/FotonTech/golden-stack/blob/08935c5d145dbca2975a4ce7c7a77fe40de418df/package.json#L44-L56 also use: husky, lint-staged https://github.com/FotonTech/golden-stack/blob/master/husky.config.js
add --fix flag to auto fix issues
I don't use imports like this anymore because it doesn't scale very well after a certain size.
|
import ellipsis from '../assets/images/ellipsis.png'; |
|
import bgCreditCard from '../assets/images/bg-creditCard.png'; |
|
import checkCreditCard from '../assets/images/check-creditCard.png'; |
|
import visa from '../assets/images/visa.png'; |
|
import contactlessPayment from '../assets/images/contactless-payment.png'; |
|
import atmWithDraws from '../assets/images/atm-with-draws.png'; |
|
import onlinePayments from '../assets/images/online-payments.png'; |
Consider using typescript with tsconfig paths setting, to avoid
../../
in imports, or use a babel plugin (maybe it's called root import I don't remember)
why did you choose to have one challenge repo instead of one repo per challenge? If I want to check out challenge A and clone it I end up cloning challenges B C D too
over-engineering:
|
const toggleSwitch = () => setIsEnabled((previousState) => !previousState); |
|
const toggleSwitch2 = () => setIsEnabled2((previousState) => !previousState); |
|
const toggleSwitch3 = () => setIsEnabled3((previousState) => !previousState); |
just add
() => setIsEnabled((previousState) => !previousState)
directly to the prop. You can actually do
() => setIsEnabled(!isEnabled)
should work about the same. The key idea here is to not add unnecessary stuff to the code, some things are just ugly and there's no fix to it, but the main problem is that "making the code nicer" is a very deep hole that will prevent you from shipping :)
cotainer and wrapper mean the same thing:
|
</WrapperSwitchButtons> |
|
</ContainerSwitchButtons> |
maybe not the best names to use. Besides this, your variable naming is REALLY GOOD.
usage of responsive lib here is great:
|
} from 'react-native-responsive-screen'; |
I personally think that having a folder for styles like this: https://github.com/ildaneta/challenges/blob/master/financialApp/src/pages/cards/styles.js is just "hiding the code" https://twitter.com/thom_is_coding/status/1283433585249259521 if you just put it all into the same file, it would look like a lot of code... which leads me to the next point:
I think this looks good:
|
function Home() { |
|
return ( |
|
<> |
|
<Header /> |
|
<Main /> |
|
<Menu /> |
|
</> |
|
); |
|
} |
it's a well abstracted component with sub-components. I think this is too much JSX in the same place:
|
<StatusBar barStyle="light-content" backgroundColor="#2750a0" /> |
|
<BlueWrapper /> |
|
<Container> |
|
<WrapperTextMainButton> |
|
<DivTitleMain> |
|
<TitleMain>Seus Cartões</TitleMain> |
|
<ButtonMain> |
|
<ButtonImage source={ellipsis} /> |
|
</ButtonMain> |
|
</DivTitleMain> |
|
<SubTitleMain>1 cartão físico, 1 cartão virtual</SubTitleMain> |
|
</WrapperTextMainButton> |
|
|
|
<ButtonsContainer> |
|
<WrapperButton first active style={styles.shadow}> |
|
<Buttons>Cartão Físico</Buttons> |
|
</WrapperButton> |
|
|
|
<WrapperButton> |
|
<Buttons>Cartão Virtual</Buttons> |
|
</WrapperButton> |
|
</ButtonsContainer> |
|
|
|
<ContainerImage source={bgCreditCard} /> |
|
|
|
<ContainerCard> |
|
<ContainerCheckNameCard> |
|
<ContainerCheckCard> |
|
<IconsCard source={checkCreditCard} /> |
|
</ContainerCheckCard> |
|
|
|
<ContainerCheckCard visa> |
|
<IconsCard source={visa} visa /> |
|
</ContainerCheckCard> |
|
</ContainerCheckNameCard> |
|
|
|
<WrapperNumbersCard> |
|
<ContainerAsteriskCard> |
|
<ContainerAsteriskCardText>****</ContainerAsteriskCardText> |
|
</ContainerAsteriskCard> |
|
|
|
<ContainerAsteriskCard> |
|
<ContainerAsteriskCardText>****</ContainerAsteriskCardText> |
|
</ContainerAsteriskCard> |
|
|
|
<ContainerAsteriskCard> |
|
<ContainerAsteriskCardText>****</ContainerAsteriskCardText> |
|
</ContainerAsteriskCard> |
|
|
|
<ContainerAsteriskCard number> |
|
<ContainerAsteriskCardText number>2864</ContainerAsteriskCardText> |
|
</ContainerAsteriskCard> |
|
</WrapperNumbersCard> |
|
|
|
<ContainerDescriptionDataCard> |
|
<ContainerDescriptionsCardWrapper> |
|
<TitleDescriptionsCard>TITULAR DO CARTÃO</TitleDescriptionsCard> |
|
|
|
<DataDescriptionsCard>Ilda E. Neta</DataDescriptionsCard> |
|
</ContainerDescriptionsCardWrapper> |
|
|
|
<ContainerDescriptionsCardWrapper> |
|
<TitleDescriptionsCard>VALIDADE</TitleDescriptionsCard> |
|
|
|
<DataDescriptionsCard>05/22</DataDescriptionsCard> |
|
</ContainerDescriptionsCardWrapper> |
|
|
|
<ContainerDescriptionsCardWrapper> |
|
<TitleDescriptionsCard>CVV</TitleDescriptionsCard> |
|
|
|
<DataDescriptionsCard>934</DataDescriptionsCard> |
|
</ContainerDescriptionsCardWrapper> |
|
</ContainerDescriptionDataCard> |
|
</ContainerCard> |
|
|
|
<TitleSettingsCards>Configurações do Cartão</TitleSettingsCards> |
|
|
|
<ContainerSwitchButtons> |
|
<WrapperSwitchButtons> |
|
<ViewTest> |
|
<IconsButtons source={contactlessPayment} /> |
|
|
|
<TextButtons>Pagamento sem Contato</TextButtons> |
|
</ViewTest> |
|
<SwitchButton> |
|
<Switch |
|
trackColor={{false: '#E7EBF1', true: '#34B27C'}} |
|
thumbColor={isEnabled ? '#fff' : '#E7EBF1'} |
|
ios_backgroundColor="#E7EBF1" |
|
onValueChange={toggleSwitch} |
|
value={isEnabled} |
|
/> |
|
</SwitchButton> |
|
</WrapperSwitchButtons> |
|
</ContainerSwitchButtons> |
|
|
|
<ContainerSwitchButtons> |
|
<WrapperSwitchButtons> |
|
<ViewTest> |
|
<IconsButtons source={onlinePayments} /> |
|
|
|
<TextButtons>Pagamento Online</TextButtons> |
|
</ViewTest> |
|
|
|
<SwitchButton> |
|
<Switch |
|
trackColor={{false: '#E7EBF1', true: '#34B27C'}} |
|
thumbColor={isEnabled2 ? '#fff' : '#E7EBF1'} |
|
ios_backgroundColor="#E7EBF1" |
|
onValueChange={toggleSwitch2} |
|
value={isEnabled2} |
|
/> |
|
</SwitchButton> |
|
</WrapperSwitchButtons> |
|
</ContainerSwitchButtons> |
|
|
|
<ContainerSwitchButtons last> |
|
<WrapperSwitchButtons> |
|
<ViewTest> |
|
<IconsButtons source={atmWithDraws} /> |
|
|
|
<TextButtons>Saque Caixa Eletrônico</TextButtons> |
|
</ViewTest> |
|
<SwitchButton> |
|
<Switch |
|
trackColor={{false: '#E7EBF1', true: '#34B27C'}} |
|
thumbColor={isEnabled3 ? '#fff' : '#E7EBF1'} |
|
ios_backgroundColor="#E7EBF1" |
|
onValueChange={toggleSwitch3} |
|
value={isEnabled3} |
|
/> |
|
</SwitchButton> |
|
</WrapperSwitchButtons> |
|
</ContainerSwitchButtons> |
|
</Container> |
|
<Menu /> |
you should break it down into components so it looks more like Home.js, and carry the styles together with the components, it makes sense to have them together because colocation is kinda good
https://twitter.com/sseraphini/status/1121751206924378112
this isn't even a lot of styling: https://github.com/ildaneta/challenges/blob/master/financialApp/src/components/Main/styles.js ditch index.js and styles.js pattern and have them all in the same file, name the file Foo.js. It's better for you to find files and IDE too.
give components meaningful names to help debugging them:
version 16 has issues with multidex, it's safe to support 21 and up I think
enable hermes :D
|
enableHermes: false, // clean and rebuild if changing |
add release signing config to buid signed apk for prod:
|
signingConfigs { |
|
debug { |
|
storeFile file('debug.keystore') |
|
storePassword 'android' |
|
keyAlias 'androiddebugkey' |
|
keyPassword 'android' |
|
} |
change this line then:
|
signingConfig signingConfigs.debug |
ternaries like this are ok, but I don't think they're the best solution
width: ${(props) => (props.menuCenter ? `${wp('13%')};` : `${wp('15%')};`)};
height: ${(props) => (props.menuCenter ? `${hp('7')};` : `${hp('5%')};`)};
margin-bottom: ${wp('2')};
background: ${(props) => (props.menuCenter ? '#234F9D' : '#eceef2')};
border-radius: ${(props) =>
It's a hard problem, but at some point in the furure maybe if need stuff like this, you need a component 🤔
Keep up the good work ilda :D really nice to have people like you in the community