Vou criar um exemplo de aplicativo com sistema de bônus no cadastro. Aqui está uma implementação completa usando **React Native** com **Firebase**:
## 1. Estrutura do Projeto
“`bash
App/
├── src/
│ ├── screens/
│ │ ├── RegisterScreen.js
│ │ ├── LoginScreen.js
│ │ └── DashboardScreen.js
│ ├── services/
│ │ └── firebase.js
│ └── components/
│ └── BonusModal.js
└── App.js
“`
## 2. Configuração do Firebase
**services/firebase.js:**
“`javascript
import { initializeApp } from ‘firebase/app’;
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword
} from ‘firebase/auth’;
import {
getFirestore,
doc,
setDoc,
getDoc,
updateDoc
} from ‘firebase/firestore’;
const firebaseConfig = {
apiKey: “SUA_API_KEY”,
authDomain: “SEU_PROJETO.firebaseapp.com”,
projectId: “SEU_PROJETO”,
storageBucket: “SEU_PROJETO.appspot.com”,
messagingSenderId: “SEU_SENDER_ID”,
appId: “SEU_APP_ID”
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const registerUser = async (email, password, userData) => {
try {
// Criar usuário no Authentication
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
const user = userCredential.user;
// Salvar dados adicionais no Firestore
await setDoc(doc(db, “users”, user.uid), {
…userData,
email: email,
createdAt: new Date().toISOString(),
bonusReceived: true,
bonusAmount: 50.00, // Bônus de R$ 50,00
balance: 50.00, // Saldo inicial com bônus
totalEarned: 50.00
});
return { success: true, user };
} catch (error) {
return { success: false, error: error.message };
}
};
“`
## 3. Tela de Cadastro com Bônus
**screens/RegisterScreen.js:**
“`javascript
import React, { useState } from ‘react’;
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Alert,
ScrollView,
KeyboardAvoidingView,
Platform
} from ‘react-native’;
import { registerUser } from ‘../services/firebase’;
import BonusModal from ‘../components/BonusModal’;
const RegisterScreen = ({ navigation }) => {
const [name, setName] = useState(”);
const [email, setEmail] = useState(”);
const [password, setPassword] = useState(”);
const [phone, setPhone] = useState(”);
const [loading, setLoading] = useState(false);
const [showBonusModal, setShowBonusModal] = useState(false);
const handleRegister = async () => {
if (!name || !email || !password || !phone) {
Alert.alert(‘Erro’, ‘Por favor, preencha todos os campos’);
return;
}
if (password.length < 6) {
Alert.alert('Erro', 'A senha deve ter pelo menos 6 caracteres');
return;
}
setLoading(true);
const userData = {
name,
phone,
referralCode: generateReferralCode(),
hasReceivedWelcomeBonus: true
};
const result = await registerUser(email, password, userData);
setLoading(false);
if (result.success) {
setShowBonusModal(true);
// Redirecionar após 3 segundos
setTimeout(() => {
setShowBonusModal(false);
navigation.navigate(‘Dashboard’);
}, 3000);
} else {
Alert.alert(‘Erro no cadastro’, result.error);
}
};
const generateReferralCode = () => {
return Math.random().toString(36).substring(2, 8).toUpperCase();
};
return (
E ganhe
Crédito liberado imediatamente após o cadastro
{loading ? ‘Cadastrando…’ : ‘Cadastrar e Ganhar R$ 50,00’}
>
Já tem uma conta?
Ao cadastrar, você concorda com nossos{‘ ‘}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#f5f5f5’,
},
scrollContainer: {
flexGrow: 1,
padding: 20,
},
header: {
alignItems: ‘center’,
marginTop: 40,
marginBottom: 30,
},
title: {
fontSize: 28,
fontWeight: ‘bold’,
color: ‘#333’,
},
subtitle: {
fontSize: 16,
color: ‘#666’,
marginTop: 10,
textAlign: ‘center’,
},
bonusText: {
color: ‘#4CAF50’,
fontWeight: ‘bold’,
},
bonusCard: {
backgroundColor: ‘#4CAF50’,
borderRadius: 15,
padding: 20,
alignItems: ‘center’,
marginBottom: 30,
elevation: 5,
shadowColor: ‘#000’,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
},
bonusCardTitle: {
color: ‘white’,
fontSize: 14,
fontWeight: ‘600’,
marginBottom: 5,
},
bonusCardAmount: {
color: ‘white’,
fontSize: 36,
fontWeight: ‘bold’,
marginBottom: 5,
},
bonusCardDescription: {
color: ‘rgba(255, 255, 255, 0.9)’,
fontSize: 14,
textAlign: ‘center’,
},
form: {
marginBottom: 20,
},
input: {
backgroundColor: ‘white’,
borderRadius: 10,
padding: 15,
marginBottom: 15,
fontSize: 16,
borderWidth: 1,
borderColor: ‘#ddd’,
},
button: {
backgroundColor: ‘#4CAF50’,
borderRadius: 10,
padding: 18,
alignItems: ‘center’,
marginTop: 10,
},
buttonDisabled: {
backgroundColor: ‘#81C784’,
},
buttonText: {
color: ‘white’,
fontSize: 18,
fontWeight: ‘bold’,
},
loginLink: {
marginTop: 20,
alignItems: ‘center’,
},
loginText: {
color: ‘#666’,
fontSize: 16,
},
loginTextBold: {
color: ‘#4CAF50’,
fontWeight: ‘bold’,
},
termsContainer: {
marginTop: 30,
paddingHorizontal: 20,
},
termsText: {
color: ‘#999’,
fontSize: 12,
textAlign: ‘center’,
lineHeight: 18,
},
termsLink: {
color: ‘#4CAF50’,
textDecorationLine: ‘underline’,
},
});
export default RegisterScreen;
“`
## 4. Modal de Bônus
**components/BonusModal.js:**
“`javascript
import React from ‘react’;
import {
Modal,
View,
Text,
StyleSheet,
TouchableOpacity,
Animated,
Dimensions
} from ‘react-native’;
import LottieView from ‘lottie-react-native’;
const { width, height } = Dimensions.get(‘window’);
const BonusModal = ({ visible, amount, onClose }) => {
const scaleValue = new Animated.Value(0);
React.useEffect(() => {
if (visible) {
Animated.spring(scaleValue, {
toValue: 1,
tension: 50,
friction: 7,
useNativeDriver: true,
}).start();
}
}, [visible]);
return (
BÔNUS DE BOAS-VINDAS
R$ {amount}
Seu bônus foi creditado com sucesso!
Use seu crédito para fazer compras no app
COMEÇAR A USAR
);
};
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: ‘rgba(0, 0, 0, 0.8)’,
justifyContent: ‘center’,
alignItems: ‘center’,
},
modalContainer: {
width: width * 0.85,
backgroundColor: ‘white’,
borderRadius: 25,
overflow: ‘hidden’,
elevation: 20,
shadowColor: ‘#000’,
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.3,
shadowRadius: 20,
},
confettiContainer: {
position: ‘absolute’,
top: -50,
left: -50,
right: -50,
bottom: -50,
zIndex: 1,
},
confetti: {
flex: 1,
},
content: {
padding: 30,
alignItems: ‘center’,
zIndex: 2,
backgroundColor: ‘white’,
},
congratsText: {
fontSize: 22,
fontWeight: ‘bold’,
color: ‘#4CAF50’,
marginBottom: 10,
},
bonusTitle: {
fontSize: 16,
color: ‘#666’,
marginBottom: 5,
textAlign: ‘center’,
},
amountText: {
fontSize: 48,
fontWeight: ‘bold’,
color: ‘#4CAF50’,
marginVertical: 10,
},
message: {
fontSize: 18,
color: ‘#333’,
textAlign: ‘center’,
marginTop: 20,
marginBottom: 5,
},
subMessage: {
fontSize: 14,
color: ‘#666’,
textAlign: ‘center’,
marginBottom: 30,
},
closeButton: {
backgroundColor: ‘#4CAF50’,
paddingHorizontal: 40,
paddingVertical: 15,
borderRadius: 25,
marginTop: 10,
},
closeButtonText: {
color: ‘white’,
fontSize: 16,
fontWeight: ‘bold’,
},
});
export default BonusModal;
“`
## 5. App.js Principal
“`javascript
import React from ‘react’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import RegisterScreen from ‘./src/screens/RegisterScreen’;
import LoginScreen from ‘./src/screens/LoginScreen’;
import DashboardScreen from ‘./src/screens/DashboardScreen’;
const Stack = createStackNavigator();
export default function App() {
return (
);
}
“`
## 6. Instalação das Dependências
“`bash
# Dependências principais
npm install @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context
npm install firebase
npm install lottie-react-native
# Para iOS (se estiver usando)
cd ios && pod install
# Para animações (opcional)
npm install react-native-reanimated
“`
## 7. Recursos Adicionais (opcional)
Para um sistema mais completo, você pode adicionar:
1. **Sistema de indicação:** Bônus para quem indica amigos
2. **Validade do bônus:** Definir prazo para uso
3. **Regras de uso:** Mínimo de compra, categorias válidas
4. **Push notification:** Notificar sobre o bônus
5. **Analytics:** Acompanhar conversão de cadastros
## 8. Configuração do Firebase Console
1. Crie um projeto no [Firebase Console](https://console.firebase.google.com/)
2. Adicione um app Android/iOS
3. Baixe o arquivo de configuração
4. Ative Authentication (Email/Password)
5. Ative Firestore Database
Este aplicativo oferece uma experiência completa de cadastro com bônus, incluindo:
– Interface atrativa destacando o bônus
– Modal animado de confirmação
– Integração com Firebase para persistência
– Validações básicas
– Design responsivo e moderno
Você pode personalizar cores, valores do bônus e fluxo conforme necessário!