656 écrans d'app mobile prêts à l'emploi

Retour

Dépannage

Animations qui ne jouent pas, mauvaises polices, un agent qui a redessiné votre écran. Les cinq vrais échecs.

Les animations ne jouent pas

C'est de loin le problème le plus courant. Reanimated a besoin de son plugin Babel, et il doit être le dernier dans le tableau plugins. Sans lui, les composants animés s'affichent à leurs valeurs finales et rien ne bouge, sans aucune erreur nulle part.

// babel.config.js
module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], // must be LAST
  }
}

Redémarrez ensuite le bundler avec le cache vidé : npx expo start -c. Un simple redémarrage ne suffit pas.

Les polices ont l'air fausses

Les polices se chargent une fois à la racine de l'app, pas à l'intérieur d'un écran. Chaque design exporte un objet fonts ; ajoutez-le à useFonts dans votre racine et gardez l'écran de démarrage jusqu'à sa résolution. Si vous sautez cette étape, le texte retombe sur la police système et chaque graisse a l'air légèrement décalée.

import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import { fonts } from './components/clean-settings/screen'

SplashScreen.preventAutoHideAsync()

export default function App() {
  const [loaded, error] = useFonts({ ...fonts })
  useEffect(() => {
    if (loaded || error) SplashScreen.hideAsync()
  }, [loaded, error])
  if (!loaded && !error) return null
  return <YourApp />
}

L'agent l'a redessiné pour correspondre à mon app

Dites-lui de revenir en arrière et collez le prompt dans une conversation neuve. L'instruction de ne pas adapter est dans chaque prompt, mais une longue session où l'agent a déjà absorbé vos conventions peut passer outre. Un contexte propre est la solution fiable.

Ça plante dans Expo Go

Vérifiez le badge du design. Quelques-uns utilisent des modules natifs que Expo Go n'inclut pas, et ceux-là nécessitent un development build. Le badge sur la carte, le badge sur la page de détail et le prompt lui-même le signalent tous avant que vous ne copiiez.

npx expo run:ios

L'agent s'est arrêté à mi-chemin et a laissé un placeholder

Demandez-lui de terminer le fichier qu'il a tronqué, en le nommant. Le prompt interdit explicitement les placeholders, mais les agents sous pression de contexte le font encore parfois, et les longs flux en sont généralement la cause. Rien n'est perdu ; le reste du collage est intact.

Toujours bloqué ?
Écrivez à support@clevens.com avec le slug du design et ce que votre agent a fait. Un prompt qui échoue de la même façon deux fois est un bug du prompt, pas de votre configuration, et il est corrigé.